當用戶雙擊提交按鈕時，需要避免向服務器提交兩次表單

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