如何用一个按钮提交两个表单至不同API？

要实现点击一个按钮提交两个表单到各自的API，原生HTML没法直接做到，得借助JavaScript手动处理表单数据的提交。下面是两种实用的实现方案：

方案一：基础串行提交（用Fetch API） #

首先给你的两个表单加上唯一ID，方便在JS里精准获取它们：

<form id="form1" method="post" action="/a/url/goes/here">
  <!-- 你的表单字段示例 -->
  <input type="text" name="username" placeholder="用户名" required>
</form>

<form id="form2" method="post" action="/a/different/url/goes/here">
  <!-- 你的复选框示例 -->
  <input type="checkbox" name="preferences" value="email">接收邮件通知
  <input type="checkbox" name="preferences" value="sms">接收短信通知
</form>

<button id="submitBtn">SUBMIT</button>

然后添加JavaScript代码，监听按钮点击事件，分别收集表单数据并提交到对应API：

document.getElementById('submitBtn').addEventListener('click', async function() {
  // 获取表单元素并创建FormData对象（自动收集所有表单字段）
  const form1 = document.getElementById('form1');
  const form1Data = new FormData(form1);
  
  const form2 = document.getElementById('form2');
  const form2Data = new FormData(form2);

  try {
    // 先提交第一个表单
    const res1 = await fetch(form1.action, {
      method: form1.method,
      body: form1Data
    });
    if (!res1.ok) throw new Error('第一个表单提交失败');

    // 再提交第二个表单
    const res2 = await fetch(form2.action, {
      method: form2.method,
      body: form2Data
    });
    if (!res2.ok) throw new Error('第二个表单提交失败');

    alert('两个表单都提交成功啦！');
  } catch (error) {
    console.error('提交出错：', error);
    alert(`提交失败：${error.message}`);
  }
});

方案二：并行提交（优化性能） #

如果两个表单的提交不需要依赖顺序，用Promise.all让它们并行提交，能节省整体耗时：

document.getElementById('submitBtn').addEventListener('click', async function() {
  const form1 = document.getElementById('form1');
  const form2 = document.getElementById('form2');

  // 提前定义两个提交请求
  const submitForm1 = fetch(form1.action, {
    method: form1.method,
    body: new FormData(form1)
  }).then(res => {
    if (!res.ok) throw new Error('表单1提交失败');
  });

  const submitForm2 = fetch(form2.action, {
    method: form2.method,
    body: new FormData(form2)
  }).then(res => {
    if (!res.ok) throw new Error('表单2提交失败');
  });

  try {
    // 等待两个请求都完成
    await Promise.all([submitForm1, submitForm2]);
    alert('所有表单提交成功！');
  } catch (error) {
    console.error('提交出错：', error);
    alert(`提交失败：${error.message}`);
  }
});

额外提示 #

• 如果需要表单验证，可以在提交前先调用form.checkValidity()检查字段合法性，比如：

  if (!form1.checkValidity()) {
    form1.reportValidity(); // 触发原生提示
    return; // 终止提交流程
  }
  

• 若前端和API不在同一域名下，确保API配置了CORS跨域许可，否则会出现跨域错误。

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