多重送信、二重送信とは

入力フォームにおいて、入力した最後に「送信」ボタンや「登録」ボタンなどを押すと思いますが、そのボタンを何度も押しちゃうことです。

なぜいけないのか

入力フォームを用いているということは裏でDBにデータを登録し蓄積していることが多いわけですが、そのDBに本来1件しか登録してはいけない個人情報が2件ないしは複数件も登録されてしまったりします。

お買い物サイトなどで購入ボタンが何度も押せてしまうと、一個買ったつもりがボタンを押した回数分購入処理が走ってしまっては大問題ですよね。

そういう予期せぬ不具合の原因になったりします。

今回はJavaScript（jquery）を利用して簡単に実装しようと思います。

<form>タグにあるすべてのsubmitに対して有効なコードになっています。idを設けたりはしていません。

$(function () {
  $('form').submit(function () {
    $(this).find(':submit').prop('disabled', 'true');
  });
});

:submitのコロンを忘れないように！これによりtype="submit"の要素を選択します。なお、type属性を設定していないbutton要素も初期値がsubmitのため選択されます。

最新のブラウザでパフォーマンスを向上させるには、input[type="submit"], button[type="submit"]を代わりに使用してください。

$(function () {
  $('form').submit(function () {
    $(this).find('input[type="submit"], button[type="submit"]').prop('disabled', 'true');
  });
});

$(function () {
  $('form').submit(function () {
    $(this).find(':submit').attr('visibility', 'hidden');
  });
});

$(function () {
  $('form').submit(function () {
    $(this).find(':submit').val('送信中...');
  });
});

例えば「送信」ボタンが、「送信中」に変更します。

ボタンは押せちゃいますね。無効になるパターンと組み合わせるのもいいかもしれません。