求助：XMLHttpRequest单按钮提交多表单仅发送最后一个表单问题

咱们来拆解你遇到的两个问题：循环用XMLHttpRequest提交仅发送最后一个表单，以及用.submit()提交时跳过索引0，逐个解决：

一、XMLHttpRequest循环提交仅发最后一个表单的核心原因 #

你的代码里有两个关键错误：

1. 复用同一个XHR实例：你在循环中一直使用同一个xhr对象，每次调用xhr.open()会直接覆盖之前的请求配置。加上send是异步操作，循环执行速度远快于请求发送，最后xhr会被最后一次请求的配置完全覆盖，导致只有最后一个请求能发出去。
2. 错误调用表单.submit()方法：document.getElementById("submitAnswers"+j).submit()会触发表单的默认跳转提交行为，这不仅会中断后续的XHR请求，而且这个方法本身返回undefined，你把它传给xhr.send()相当于没传任何数据，完全无效。

二、修复XHR循环提交的可行方案 #

你需要在每次循环中创建新的XHR实例，并且手动收集表单数据（而非调用.submit()），再通过XHR发送：

// 注意用let声明j，避免闭包变量泄漏问题
for(let j = 0; j < collection; j++) {
  // 每次循环创建新的XHR对象
  const xhr = new XMLHttpRequest();
  const form = document.getElementById("submitAnswers" + j);
  // 用FormData自动收集表单数据，浏览器会处理编码
  const formData = new FormData(form);

  xhr.open("POST", "showQuestionnaire.php", true);
  // 使用FormData时无需手动设置Content-type，浏览器会自动添加正确的头
  // xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

  // 请求完成后的回调，可根据需求处理响应
  xhr.onload = function() {
    if(xhr.status >= 200 && xhr.status < 300) {
      console.log(`表单${j}提交成功`, xhr.responseText);
    } else {
      console.error(`表单${j}提交失败`, xhr.statusText);
    }
  };

  xhr.onerror = function() {
    console.error(`表单${j}网络请求失败`);
  };

  // 发送收集到的表单数据
  xhr.send(formData);
}

如果后端showQuestionnaire.php要求必须用application/x-www-form-urlencoded格式，也可以手动序列化表单：

// 手动序列化表单为urlencoded格式的工具函数
function serializeForm(form) {
  const params = new URLSearchParams();
  for(const [name, value] of new FormData(form)) {
    params.append(name, value);
  }
  return params.toString();
}

// 循环中替换为：
const formDataStr = serializeForm(form);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(formDataStr);

三、.submit()提交跳过索引0的原因及修复 #

你遇到的跳过索引0问题，大概率是因为第一个表单提交后触发了页面跳转，导致后续的循环代码根本没机会执行（页面刷新后JS重新加载，循环条件可能不再满足）。

如果非要用表单默认提交方式，你需要避免页面刷新，比如用隐藏iframe承载每个表单的提交：

<!-- 先准备一个隐藏的iframe -->
<iframe id="submitFrame" name="submitFrame" style="display: none;"></iframe>

<script>
for(let j = 0; j < collection; j++) {
  const form = document.getElementById("submitAnswers" + j);
  // 让表单在隐藏iframe里提交，不刷新当前页面
  form.target = "submitFrame";
  form.submit();
}
</script>

不过这种方式很难跟踪每个表单的提交结果，更推荐用前面的XHR（或Fetch API）异步方案，既不会刷新页面，也能精准控制每个请求的状态。

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