如何防止 jQuery 中的雙重表單提交？

防止jQuery 中的表單重新提交

在表單提交中，防止用戶在伺服器處理延遲期間意外提交兩次至關重要。常見的解決方案是在提交時停用表單元素。但是，這種方法可能會停用不應該的元素，例如包含基本資料的輸入。

僅停用提交按鈕

專門停用提交按鈕並避免干擾對於表單提交，請使用以下程式碼：

$('button[type=submit], input[type=submit]').prop('disabled',true);

用於防止雙重提交的jQuery 外掛程式

另一個有效的解決方案是建立一個利用data( ) 函數將表單標記為已提交：

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;
};

要使用該插件，只需將其應用到您的表單：

$('form').preventDoubleSubmission();

排除Ajax 表單

如果您有需要多次提交的AJAX 表單，請透過新增類別並使用以下選擇器來排除它們：

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

透過利用這些技術，您可以防止重複表單提交並確保伺服器流暢正在處理。

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