PHP/JavaScript问题：动态生成textarea仅提交最后日期值求助

这问题我之前做考勤统计功能时也踩过一模一样的坑！大概率是循环生成元素时的作用域陷阱或者表单元素name重复导致的，咱们一步步捋清楚：

最常见原因：循环变量的作用域问题 #

如果你是用var来声明循环里的日期变量，那所有点击事件都会指向最后一次循环的日期值——因为var是函数级作用域，循环里的所有date变量其实都是同一个引用，循环结束后它的值就是最后一天的日期。

比如你可能写过类似这样的错误代码：

var days = 28; // 2018年2月的天数
for(var i = 1; i <= days; i++){
  var date = `2018-02-${i.toString().padStart(2, '0')}`;
  var textarea = document.createElement('textarea');
  textarea.value = date;
  var btn = document.createElement('button');
  btn.innerText = "提交";
  btn.onclick = function(){
    // 这里的date永远是最后一次循环的2018-02-28！
    saveToDB(date);
  }
  document.body.append(textarea, btn);
}

解决方法： #

1. 用let/const声明变量：let是块级作用域，每个循环迭代都会创建独立的date变量，点击事件会正确捕获当前迭代的日期：

const days = 28;
for(let i = 1; i <= days; i++){
  const date = `2018-02-${i.toString().padStart(2, '0')}`;
  const textarea = document.createElement('textarea');
  textarea.value = date;
  const btn = document.createElement('button');
  btn.innerText = "提交";
  btn.onclick = function(){
    saveToDB(date); // 现在每个按钮都对应自己的date了
  }
  document.body.append(textarea, btn);
}

2. 把日期存在元素自定义属性里：更稳妥的方式是把日期绑定到textarea或按钮上，点击时直接从元素上取，不依赖外部变量：

const days = 28;
for(let i = 1; i <= days; i++){
  const date = `2018-02-${i.toString().padStart(2, '0')}`;
  const textarea = document.createElement('textarea');
  textarea.dataset.date = date; // 用dataset存日期
  textarea.value = date;
  const btn = document.createElement('button');
  btn.innerText = "提交";
  btn.onclick = function(){
    const targetDate = textarea.dataset.date;
    saveToDB(targetDate);
  }
  document.body.append(textarea, btn);
}

另一个可能原因：表单元素name重复 #

如果你是用<form>包裹所有textarea，且所有textarea的name属性都一样（比如都叫date），那么表单提交时浏览器只会把最后一个textarea的值发送给后端，这是表单提交的默认行为。

解决方法： #

• 不需要把所有textarea都放在表单里，而是通过点击事件触发AJAX单独提交当前对应的日期（就像上面的代码示例那样）
• 如果一定要用表单，给每个textarea设置唯一的name，或者用name="date[]"让后端接收数组，但这样你还得额外处理如何标记用户点击的那个日期，反而麻烦，不如用AJAX更直接。

总结排查步骤： #

1. 检查循环里的变量声明，是不是用了var，换成let/const试试
2. 查看点击事件里的日期值是从哪里获取的，尽量从触发元素关联的DOM节点上取（比如自定义属性）
3. 如果是表单提交，检查textarea的name属性是否重复

内容的提问来源于stack exchange，提问作者Jenny