フォーム要素を無効にせずに 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 中国語 Web サイトの他の関連記事を参照してください。