如何在不停用表單元素的情況下防止 jQuery 中的雙重表單提交？

使用jQuery 防止表單中的雙重提交

用戶經常會意外地重新提交表單，尤其是當他們需要很長時間來處理時。為了防止這種情況，可以使用 jQuery 在初次嘗試後停用表單提交。但是，在某些情況下，停用所有表單元素（包括輸入）可能會無意中阻止提交本身。

使用 jQuery 插件改進的解決方案

另一種方法是使用一個用於處理雙重提交預防的 jQuery 插件。此插件利用 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 表單）提交多次，則可以使用CSS 類別排除它們，如下例所示：

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

透過這種方式，可以毫無問題地提交表單，同時有效防止意外重新提交，增強使用者體驗並防止潛在的資料遺失。

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