如何使用 jQuery 防止雙重表單提交？

使用jQuery 防止雙重表單提交

在某些情況下，當伺服器仍在處理表單時，必須阻止使用者重新提交表單。初次提交。本文使用 jQuery 提供了此問題的解決方案，承諾保留表單功能，同時有效抑制重複提交。

jQuery 程式碼導致問題

您最初的 jQuery 程式碼停用了所有表單元素，包括提交按鈕，這會導致表單未提交。僅停用提交按鈕至關重要，因為可能存在具有不同功能的多個按鈕。

修訂的解決方案

修訂的解決方案利用 jQuery 中的資料屬性來防止重複提交，而無需修改提交按鈕。以下是改進後的程式碼：

jQuery.fn.preventDoubleSubmission = function() {
    $(this).on('submit',function(e){
        var $form = $(this);

        if ($form.data('submitted') === true) {
            // Previously submitted - don't submit again
            e.preventDefault();
        } else {
            // Mark it so that the next submit can be ignored
            $form.data('submitted', true);
        }
    });

    // Keep chainability
    return this;
};

用法

要實現此解決方案，只需在表單元素上呼叫PreventDoubleSubmission 函數即可：

$('form').preventDoubleSubmission();

處理AJAX表單

如果特定表單應允許在頁面載入中多次提交，您可以使用類別排除它們：

$('form:not(.js-allow-double-submission)').preventDoubleSubmission();

透過合併此改進的解決方案，您可以有效防止雙重提交在您的Web 應用程式中提交表單，確保無縫的使用者體驗並避免潛在的資料不一致。

以上是如何使用 jQuery 防止雙重表單提交？的詳細內容。更多資訊請關注PHP中文網其他相關文章！