如何在不禁用表单元素的情况下防止 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中文网其他相关文章！