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

Need to avoid submit form twice to the server when user double clicks on submit button

本文关键字：提交 表单 服务器 两次 按钮 双击 用户      更新时间：2023-09-26

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

代码:

            var validator = jQuery("#form")
              .validate(
                {
                    errorClass : "invalid",
                    validClass : "valid",
                    submitHandler : function() {
                        //function to submit form to client
                        submitFormtoClient();

                    },

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

只有在表单有效且点击提交按钮后才会触发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();
}

当您确定表单是有效的并且应该提交时，在"提交"中，在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]。

相关文章：