当用户双击提交按钮时，需要避免向服务器提交两次表单

Posted 2023-05-09

【中文标题】当用户双击提交按钮时，需要避免向服务器提交两次表单

【英文标题】：Need to avoid submit form twice to the server when user double clicks on submit button

【发布时间】：2017-01-24 16:44:42

【问题描述】：

使用 jquery 验证插件，我正在验证表单并将其提交到将表单数据存储在数据库中的服务器。问题是当用户双击表单时，有多个请求进入，并且它向服务器提交了两次，并导致数据库中具有相同数据的多个记录。我想避免这种情况。即使用户在提交按钮上单击了两次，我也希望表单只提交一次。

代码：

            var validator = jQuery("#form")
              .validate(
                

                    errorClass : "invalid",
                    validClass : "valid",
                    submitHandler : function() 

                        //function to submit form to client
                        submitFormtoClient();


                    ,

当用户点击提交时，表单被验证，然后提交处理函数被调用。即使提交按钮被点击了两次，我也希望它只被调用一次

【问题讨论】：

在submitFormtoClient()第一次被调用时设置一个标志

最后在回调设置标志为假；

向我们展示您的submitFormtoClient() 函数和相关的html。

【参考方案1】：

submitHandler 仅在表单有效且单击提交按钮后才会触发。如果在第一次点击提交按钮后立即禁用它，就不可能出现双击的情况。

submitHandler: function(form)   // form is valid

    // disable submit button since it was already clicked and submit is happening next
    $('#your-submit-button').prop('disabled', true);

    // function to submit form to client
    submitFormtoClient();

【参考方案2】：

当您确定表单有效并且应该提交时，在“提交”中，在您return true 之前，您可以将表单的提交按钮设置为禁用，并且它不应提交两次。

如果你确定它不应该提交，你会返回 false。

$('.foo-form').on("submit", function(event)
    $(this).children('button[type=submit]').prop('disabled', true);
    return true;

在这种情况下，我使用了button[type=submit]，但您也可以使用input[type=submit]。