如何用单个外部按钮通过AJAX提交两个表单？现有代码提交空数据

你需要实现单个按钮提交两个独立表单（id为form1、form2）的功能，按钮位于表单外部，但当前代码无法正常提交，会发送空数据。

原页面结构 #

<form name="form1" id="form1" class="pclass">
<input type="text" name="name">
</form>

<form name="form2" id="form2" class="pclass">
<input type="text" name="name">
</form>

按钮在这里 
<button type="button" class="btn btn-primary">Check</button>

原JS代码 #

<script type="text/javascript">
    $(".pclass").click(function (e) {
        e.preventDefault();
        var formData = $("#form1, #form2").serialize();;

        console.log(formData);
        $.ajax({
          type: "POST",
          url: "proceed.php",
          data: formData
        }).done(function (data) {
          console.log(data);
        });
    });
</script>   

问题排查 #

1. 事件绑定对象错误：你把点击事件绑定在了表单（.pclass）上，但实际触发提交的是外部按钮，点击按钮时根本不会执行这段JS代码，这是导致无数据提交的核心原因。
2. 表单字段命名冲突：两个表单的input都用name作为字段名，直接序列化会导致后一个表单的值覆盖前一个，后端无法区分两组数据。

正确解决方案 #

步骤1：调整页面结构（给按钮加id方便选择） #

<form name="form1" id="form1" class="pclass">
  <!-- 修改name属性避免冲突 -->
  <input type="text" name="form1_name">
</form>

<form name="form2" id="form2" class="pclass">
  <input type="text" name="form2_name">
</form>

<button type="button" class="btn btn-primary" id="submitBtn">Check</button>

步骤2：编写正确的JS代码 #

方案一：使用serializeArray合并数据（适合普通文本字段）

<script type="text/javascript">
  // 绑定按钮的点击事件
  $("#submitBtn").click(function(e) {
    e.preventDefault();
    // 分别序列化两个表单为数组
    var form1Data = $("#form1").serializeArray();
    var form2Data = $("#form2").serializeArray();
    // 合并两组数据
    var combinedData = form1Data.concat(form2Data);
    
    console.log(combinedData);
    $.ajax({
      type: "POST",
      url: "proceed.php",
      data: combinedData
    }).done(function(data) {
      console.log(data);
    });
  });
</script>

方案二：使用FormData（支持文件上传，兼容性更强）

<script type="text/javascript">
  $("#submitBtn").click(function(e) {
    e.preventDefault();
    var formData = new FormData();
    
    // 遍历第一个表单的所有字段添加到FormData
    $.each($("#form1").serializeArray(), function(i, field) {
      formData.append(field.name, field.value);
    });
    // 遍历第二个表单的所有字段添加到FormData
    $.each($("#form2").serializeArray(), function(i, field) {
      formData.append(field.name, field.value);
    });
    
    console.log(formData);
    $.ajax({
      type: "POST",
      url: "proceed.php",
      data: formData,
      // FormData必须设置这两个参数，否则无法正确提交
      processData: false,
      contentType: false
    }).done(function(data) {
      console.log(data);
    });
  });
</script>

可选：不修改原字段名的处理方式 #

如果不想修改input的name属性，可以在序列化时手动添加前缀区分：

var form1Data = $("#form1").serializeArray().map(function(item) {
  return {name: 'form1_' + item.name, value: item.value};
});
var form2Data = $("#form2").serializeArray().map(function(item) {
  return {name: 'form2_' + item.name, value: item.value};
});
var combinedData = form1Data.concat(form2Data);

后端可以通过$_POST['form1_name']和$_POST['form2_name']（或添加前缀后的字段名）分别获取两个表单的数据。

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