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

Question

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

代码：

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

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

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


                    },

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

Answer 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();

}

Answer 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] 。