如何使用单个提交按钮提交多个表单？现有代码仅提交最后一个如何解决

问题根因 #

原生HTML表单调用submit()方法时，浏览器默认会加载服务端返回的响应，这个行为会直接中断当前页面所有未完成的网络请求，所以前两个表单的提交请求刚触发就被后续的提交操作打断，只有最后一个表单的请求能完整发送到后端被处理，和异步操作无关。

可行解决方案 #

方案1：合并所有表单数据统一提交（最推荐） #

把三个表单的所有字段合并到同一个请求中提交，后端只需要处理一次请求即可拿到所有数据：

document.getElementById('submit').addEventListener('click', async function() {
  const totalFormData = new FormData();
  // 遍历所有表单收集数据
  for (let i = 0; i < document.forms.length; i++) {
    const currentForm = document.forms[i];
    const formData = new FormData(currentForm);
    // 追加字段时增加表单前缀，避免同名字段覆盖
    formData.forEach((value, key) => {
      totalFormData.append(`${currentForm.className}_${key}`, value);
    })
  }
  // 统一提交
  try {
    const response = await fetch('action.php', {
      method: 'POST',
      body: totalFormData
    });
    const result = await response.text();
    // 自定义提交后的逻辑，比如提示成功、跳转页面
    console.log('提交成功', result);
  } catch (error) {
    console.error('提交失败', error);
  }
})

同时建议把按钮的type属性改成button，避免触发不必要的默认提交行为：

<button id="submit" type="button" name="submit_changes">Save Changes</button>

方案2：异步分别提交所有表单 #

如果业务逻辑要求必须单独提交每个表单，可以用fetch分别发送请求，等待所有请求完成后再执行后续操作：

document.getElementById('submit').addEventListener('click', async function() {
  const submitTasks = [];
  for (let i = 0; i < document.forms.length; i++) {
    const currentForm = document.forms[i];
    submitTasks.push(fetch('action.php', {
      method: 'POST',
      body: new FormData(currentForm)
    }))
  }
  try {
    // 等待所有表单提交完成
    await Promise.all(submitTasks);
    console.log('所有表单提交完成');
    // 可在这里添加提交后的跳转、提示逻辑
  } catch (error) {
    console.error('部分表单提交失败', error);
  }
})

方案3：合并为单个表单 #

如果没有必须拆分表单的特殊需求，直接把三个表单的内容合并到同一个<form>标签内，给不同模块的字段名加对应前缀区分，直接用原生提交即可，不需要额外写JS逻辑。

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