jQuery での二重フォーム送信を防ぐ方法: どのテクニックが最も効果的ですか?

jQuery でフォームの二重送信を防ぐ方法

処理にかなりの時間がかかるフォームを操作する場合、ユーザーが誤って送信することを防ぎます。フォームを複数回送信することが重要です。この記事では、jQuery を使用してこれを実現する方法について説明します。

初期試行

最初のアプローチでは、フォーム送信時にすべての入力とボタンを無効にする必要がありました。ただし、この手法では、Firefox でフォームが送信されませんでした。

改善された解決策

解決策は、すべての入力を無効にすると送信ボタンのみを選択的に無効にすることです。フォームの送信を妨げます。次の jQuery コードはこれを実現します。

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

代替プラグイン アプローチ

別のオプションは、以下の jQuery プラグインを使用することです。これは、jQuery の data() 関数を利用してマークを付けます。

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

    if ($form.data('submitted') === true) {
      e.preventDefault();
    } else {
      $form.data('submitted', true);
    }
  });

  return this;
};

使用法:

$('form').preventDoubleSubmission();

AJAX フォームを除く

アプリケーションに次のような AJAX フォームがある場合複数の送信を許可する必要がある場合は、以下に示すようにクラスを追加することでそれらを除外できます:

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

以上がjQuery での二重フォーム送信を防ぐ方法: どのテクニックが最も効果的ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。