如何通过点击Create按钮提交并接收两份表单数据？

方法1：合并两个表单为单个表单 #

如果两份表单的字段名没有冲突，最简单的方式是把两个表单的所有输入字段合并到同一个<form>标签内，用同一个提交按钮触发提交。

示例代码：

<form id="combinedForm" action="/your-submit-url" method="POST">
  <!-- 第一份表单的字段 -->
  <div class="form-group">
    <label>用户名：</label>
    <input type="text" name="username" required>
  </div>
  <div class="form-group">
    <label>邮箱：</label>
    <input type="email" name="email" required>
  </div>

  <!-- 第二份表单的字段 -->
  <div class="form-group">
    <label>收货地址：</label>
    <input type="text" name="address" required>
  </div>
  <div class="form-group">
    <label>联系电话：</label>
    <input type="tel" name="phone" required>
  </div>

  <!-- 统一的提交按钮 -->
  <button type="submit">Create</button>
</form>

后端只需从请求中直接获取所有字段即可。

方法2：用JavaScript收集双表单数据并通过AJAX提交 #

如果两个表单必须保持独立的DOM结构，可通过JavaScript手动收集两份表单的所有数据，拼成一个FormData对象后一次性提交。

示例代码：

<!-- 第一个表单 -->
<form id="form1">
  <input type="text" name="username" value="testUser">
  <input type="email" name="email" value="test@example.com">
</form>

<!-- 第二个表单 -->
<form id="form2">
  <input type="text" name="address" value="Beijing">
  <input type="tel" name="phone" value="13800138000">
</form>

<!-- 提交按钮 -->
<button id="createBtn">Create</button>

<script>
document.getElementById('createBtn').addEventListener('click', function(e) {
  e.preventDefault();
  
  // 创建FormData对象，合并两个表单的数据
  const formData = new FormData();
  
  // 收集第一份表单的字段
  const form1Fields = document.getElementById('form1').querySelectorAll('input, select, textarea');
  form1Fields.forEach(field => {
    if (field.name) { // 确保字段有name属性
      formData.append(field.name, field.value);
    }
  });
  
  // 收集第二份表单的字段
  const form2Fields = document.getElementById('form2').querySelectorAll('input, select, textarea');
  form2Fields.forEach(field => {
    if (field.name) {
      formData.append(field.name, field.value);
    }
  });
  
  // 发送AJAX请求提交数据
  fetch('/your-submit-url', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    console.log('提交成功:', data);
    // 处理成功逻辑，比如跳转或提示
  })
  .catch(error => {
    console.error('提交失败:', error);
    // 处理错误逻辑
  });
});
</script>

方法3：提交到不同接口（若需分别提交） #

如果两份表单需要提交到不同的后端接口，可通过JavaScript依次发送两个AJAX请求：

document.getElementById('createBtn').addEventListener('click', function(e) {
  e.preventDefault();
  
  // 提交第一份表单
  const form1Data = new FormData(document.getElementById('form1'));
  fetch('/api/form1', { method: 'POST', body: form1Data })
  .then(res1 => res1.json())
  .then(data1 => {
    console.log('表单1提交成功:', data1);
    // 提交第二份表单
    const form2Data = new FormData(document.getElementById('form2'));
    return fetch('/api/form2', { method: 'POST', body: form2Data });
  })
  .then(res2 => res2.json())
  .then(data2 => {
    console.log('表单2提交成功:', data2);
    // 全部完成后的逻辑
  })
  .catch(err => console.error('提交出错:', err));
});

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