jQueryを使ってフォームの二重送信を防止する方法
サーバーサイド側で2重送信されないように処理するのが一般的ですが、 jQueryを使ってsubmitボタンをダブルクリックを防止するサンプルを記します。
<input type="submit" class="disableBtn" value="post"> <script> $('.disableBtn').on('click', function(){ $(this).text('please wait...'); $(this).attr('disabled', true); $(this).closest('form').submit(); }); </script>
クリックするとボタンの表示が「post」から「please wait...」に変わり、ボタンがクリックできなくなっていることがわかります。
通常なら上記の方法で2重送信を防止することができますが、1つのフォームに複数ボタンがあって、name属性で処理を変更している場合、jQueryの仕様上、submitボタンのname属性が拾えず、上記の方法では対応できません。 その場合の対処法はこちら。