多提交按钮表单通过jQuery手动提交后后端submitBtn参数值为null的问题排查

你遇到的这个问题核心在于手动调用表单submit()方法和点击submit按钮触发的提交，在表单数据的携带上是有本质区别的：

• 之前直接点击<button type="submit">按钮时，浏览器会自动把这个按钮的name和value作为表单数据的一部分一起提交到后端，这也是你的代码能正常获取submitBtn值的原因。
• 但现在你通过e.preventDefault()阻止了按钮的默认提交行为，转而用$('#reportform').submit()手动提交表单——这种方式下，浏览器不会自动把点击的那个按钮的name/value加入到表单数据里，所以后端的submitBtn参数自然就接收到null了。

这里给你几个可行的解决办法，你可以根据自己的需求选择：

方法一：触发按钮的原生点击事件（推荐） #

既然验证逻辑已经通过，我们不需要手动调用表单的submit方法，而是直接触发按钮的原生点击事件，这样就能保留按钮的原生提交行为，自然也会带上它的value：

$('#submitBtn').click(function (e) {
    e.preventDefault();
    // 执行你的验证逻辑
    let isValid = true; // 假设这里是你的验证结果
    if (isValid) {
        // 触发原生点击，避免循环调用绑定的事件
        this.click();
        // 或者写成 $('#submitBtn')[0].click();
    }
});

注意这里要用原生DOM元素的click()方法，而不是jQuery封装的$(this).click()——后者会再次触发你绑定的点击事件，导致无限循环。

方法二：添加隐藏字段传递值 #

在验证通过后，给表单添加一个和按钮同名的隐藏字段，把值设为"Save"，这样提交表单时就会带上这个参数：

$('#submitBtn').click(function (e) {
    e.preventDefault();
    // 执行验证逻辑
    let isValid = true;
    if (isValid) {
        // 先移除可能已存在的同名字段，避免重复提交
        $('#reportform input[name="submitBtn"]').remove();
        // 添加隐藏字段
        $('#reportform').append('<input type="hidden" name="submitBtn" value="Save">');
        // 提交表单
        $('#reportform').submit();
    }
});

方法三：通过FormData手动添加参数 #

如果你是用AJAX方式提交表单，可以手动把按钮的value加入到FormData中：

$('#submitBtn').click(function (e) {
    e.preventDefault();
    let isValid = true;
    if (isValid) {
        const form = document.getElementById('reportform');
        const formData = new FormData(form);
        // 手动添加submitBtn的值
        formData.append('submitBtn', 'Save');
        // 发起AJAX请求
        $.ajax({
            url: form.action,
            method: form.method,
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                // 处理成功逻辑
            }
        });
    }
});

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