表单提交无响应且数组为空，如何实现用户数据存入数组？

嘿，我来帮你捋捋这个问题！你说点击提交按钮没反应，控制台数组一直空，哪怕把取值逻辑放进函数return了也没用——大概率是这几个地方踩坑了，咱们一个个解决：

1. 输入值的获取逻辑大概率写错了 #

你代码里var users = { FirstName: ...没写完，但估计是没正确把label和input对应起来，或者遍历类数组的时候出了问题。毕竟getElementsByTagName返回的是HTMLCollection（类数组），得循环遍历才能拿到每个输入框的值，还要和对应的label文本匹配成对象的键值对。

给你写个完整的正确示例：

// 全局数组存用户数据
var userList = [];

function subm() {
  // 获取所有表单里的label和input（如果页面有其他input，最好给表单里的加类名区分）
  var labels = document.getElementsByTagName("label");
  var inputs = document.getElementsByTagName("input");
  var currentUser = {};

  // 循环遍历，把每个input的值对应到label的文本作为属性
  for (let i = 0; i < inputs.length; i++) {
    // 去掉label文本里的多余空格和冒号，比如"FirstName: "变成"FirstName"
    var fieldName = labels[i].textContent.trim().replace(/:$/, "");
    // 拿到输入框的值，也去掉首尾空格
    currentUser[fieldName] = inputs[i].value.trim();
  }

  // 把当前用户对象推到数组里
  userList.push(currentUser);
  // 控制台打印看看，确认数据进去了
  console.log("当前用户列表：", userList);

  // 重点！如果是submit按钮，一定要阻止默认提交行为，不然页面会刷新，数组直接重置为空！
  if (event) event.preventDefault();
}

2. 提交按钮的事件绑定没做好 #

你有没有给按钮正确绑定subm函数？比如HTML里的按钮得这么写：

<!-- 如果是普通按钮，用onclick绑定 -->
<button type="button" onclick="subm()">提交</button>

<!-- 如果是表单的submit按钮，要么加onclick，要么给表单绑submit事件 -->
<form onsubmit="subm()">
  <!-- 你的label和input -->
  <button type="submit">提交</button>
</form>

要是用了type="submit"的按钮，必须在subm函数里加event.preventDefault()，不然浏览器会默认提交表单、刷新页面，你存的数组瞬间就没了，控制台自然看不到内容！

3. 别不小心踩了作用域的坑 #

要是你的数组是在某个局部函数里定义的，那外部控制台当然看不到它的内容。看你代码里var array = []是全局的，这个问题不大，但还是要确认一下变量是不是在全局作用域里。

4. 精准获取输入框，避免干扰 #

如果页面上还有其他无关的input标签，getElementsByTagName会把它们也捞进来，导致数据错乱。最好给表单里的输入框加个专属类名，比如form-field，然后用document.getElementsByClassName("form-field")来获取，这样就不会拿到无关的输入框了。

比如优化后的HTML：

<form id="userForm">
  <label>FirstName: <input type="text" class="form-field"></label>
  <label>LastName: <input type="text" class="form-field"></label>
  <button type="submit">提交</button>
</form>

对应的JS用表单的submit事件更靠谱：

var userList = [];

// 给表单绑定submit事件，比直接绑按钮更稳妥
document.getElementById("userForm").addEventListener("submit", function(e) {
  // 先阻止默认提交刷新
  e.preventDefault();
  
  var inputs = document.getElementsByClassName("form-field");
  var labels = document.querySelectorAll("#userForm label");
  var currentUser = {};

  for (let i = 0; i < inputs.length; i++) {
    // 提取label里的字段名（比如从"FirstName: "里拿到"FirstName"）
    var fieldName = labels[i].textContent.split(":")[0].trim();
    currentUser[fieldName] = inputs[i].value.trim();
  }

  userList.push(currentUser);
  console.log("更新后的用户列表：", userList);
});

按照上面的方法调整后，点击提交按钮应该就能正确把用户输入的数据存成对象推到数组里，控制台也能看到数组的内容啦！

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