多Submit按钮场景下表单序列化返回undefined问题求助

核心问题原因 #

1. HTML输出语法错误：你的PHP代码拼接HTML时，表单元素的value和placeholder属性存在引号转义/拼接错误，导致表单控件没有正确渲染出有效值，最终serialize()无法获取到有效数据，返回undefined。
2. FormData使用不当：原代码将serialize()生成的URL编码字符串作为单个字段存入FormData，不仅增加后端解析成本，还会放大表单本身的数据无效问题。

修复步骤与代码示例 #

1. 修正PHP输出的HTML #

先修复表单元素的属性拼接错误，确保控件能正确渲染值：

echo "<br /><br /><br /><h1>Withdraw Credit</h1>
        <body>
            <div class=\"formcontainer\">
            <form id=\"requestcreditform\">
              <div class=\"container\">
                <label for=\"credit_requested\"><strong>Credit Requested</strong></label>
                <input type=\"hidden\" name=\"userid\" id=\"userid\" value=\"".$activeuser[0]->id."\">
                <input type=\"number\" name=\"creditreq\" placeholder=\"".$remaining_credit."\" id=\"creditreq\" required>
                <br /><p>This change will be reflected upon submission and your credit processed shortly afterwards.  All loans begin with a 20% interest rate, which compounds annually.  Please verify the requested credit is correct prior to hitting the \"Request via Check\" button.  Checks will be addressed to the client and shipped to the attorney's practice.  Thank you.
                </p>
              </div>
                <button name=\"shipping_type\" value=\"standard\" id=\"request_check_button\" type=\"submit\"><strong>Request via Check (Standard Shipping)</strong></button>
                
                <button name=\"shipping_type\" value=\"expedited\" id=\"request_expedited_check_button\" type=\"submit\"><strong>Request via Check (Expedited Shipping + $15)</strong></button>
           </form>
            </div>
          </body>
          <br /><br /><br />
        </html>";

2. 优化Ajax处理逻辑 #

推荐监听表单的submit事件而非单个按钮的click事件，同时简化数据传递方式：

(function($){
  $('#requestcreditform').submit(function(event) {
    event.preventDefault();
    
    // 获取当前点击的配送类型按钮的值
    var shippingType = $('button[type=submit]:focus').val();
    var endpoint = '<?php echo admin_url('admin-ajax.php');?>';
            
    // 直接序列化表单并追加额外字段，无需FormData（无文件上传场景更高效）
    var formData = $(this).serialize() + '&action=ordercheck&shipping_type=' + shippingType;
    
    $.ajax(endpoint, {
      type: 'POST',
      data: formData,
      success:function(res) {
        alert(res.data);
        location.reload();
      },
      error: function(err) {
        console.error(err);
      }
    });
  });
})(jQuery);

如果必须使用FormData（比如后续需要支持文件上传），可以直接传入表单元素初始化：

(function($){
  $('#requestcreditform').submit(function(event) {
    event.preventDefault();
    
    var endpoint = '<?php echo admin_url('admin-ajax.php');?>';
    var formdata = new FormData(this);
    
    // 追加Ajax动作标识和配送类型
    formdata.append('action', 'ordercheck');
    formdata.append('shipping_type', $('button[type=submit]:focus').val());
    
    $.ajax(endpoint, {
      type: 'POST',
      data: formdata,
      processData: false,
      contentType: false,
      success:function(res) {
        alert(res.data);
        location.reload();
      },
      error: function(err) {
        console.error(err);
      }
    });
  });
})(jQuery);

替代方案说明 #

你最终改用单按钮+复选框的设计，也是一种简洁可行的方案，避免了多提交按钮的事件判断逻辑，同样能实现区分配送类型的需求。

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