[解決済み] jQueryでフォームの二重投稿を防止する

質問

サーバーが処理するのに少し時間がかかるフォームがあります。ユーザーがボタンを再度クリックしてフォームを再送信しようとしないように、待機させる必要があります。次のようなjQueryのコードを使用してみました。

<script type="text/javascript">
$(document).ready(function() {
    $("form#my_form").submit(function() {
        $('input').attr('disabled', 'disabled');
        $('a').attr('disabled', 'disabled');
        return true;
    });
});
</script>

Firefox でこれを試すと、すべてが無効になりますが、フォームには含まれるはずの POST データがまったく送信されません。複数の送信ボタンがあり、どのボタンの値がPOSTに含まれるかによって、どのボタンが使用されたかを判断する必要があるため、jQueryを使用してフォームを送信することができないのです。フォームが通常通り送信される必要があり、その直後にすべてを無効化する必要があります。

ありがとうございます。

解決方法は？

2018年のアップデート : この古い答えにポイントがついたので、一応補足しておくと ベスト の解決策は、操作をべき乗にして、重複投稿を無害にすることでしょう。

例えば、フォームで注文を作成する場合、フォームに一意のIDを付けます。サーバーはそのIDを持つ注文作成リクエストを初めて見たとき、それを作成して "success"と応答するはずです。それ以降の送信も、(クライアントが最初の応答を受け取らなかった場合に備えて) "success"を応答すべきですが、何も変更してはいけません。

競合状態を防ぐため、データベースの一意性チェックにより重複を検出する必要があります。

問題はこの行だと思うのですが。

$('input').attr('disabled','disabled');

フォームが送信するはずのデータを含む、すべての入力を無効にしているのでしょう。

送信ボタンだけを無効にするには、次のようにします。 できる を実行します。

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

しかし、それらのボタンまで無効にしてしまうと、IEはフォームを送信してくれないと思います。別の方法を提案します。

それを解決するためのjQueryプラグイン

この問題を次のコードで解決したところです。ここでのコツは、jQueryの data() を使用して、フォームに送信済みかどうかのマークを付けています。そうすれば、IEがびっくりするような送信ボタンをいじらなくて済みます。

// jQuery plugin to prevent double submission of forms
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フォームがある場合 が必要です。 のように、ページロードごとに複数回送信できるようにするには、そのことを示すクラスを与えて、次のようにセレクタから除外することができます。

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