jQueryで二重送信を防止する
jQueryを使った二重送信防止のサンプルをメモしておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryを使った二重送信防止のサンプル</title> </head> <body> <form action=""> <input type="submit"/> </form> <script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript"> $('form').on('submit', function () { $(this).find('input:submit').attr('disabled', 'disabled').val('送信中...'); }); </script> </body> </html> <?php sleep(3); |
上記のソースコードを
form.phpとでも名前を付けて保存をし、実行してみてください。送信ボタンが変化することを確認できると思います。
22行目以降のPHPでのsleep処理は、ボタンが押せなくなったこと、またボタンの文言が変化したことを確認する為に入れているものなので、実際には必要ありません。
上記の例では、汎用性を高めるため、エレメントセレクタを使用しています。パフォーマンスを求める必要があるのであれば、IDセレクタを用いた方が良いでしょう。
また、あくまでJavaScriptでの処理なので、必ず二重送信を防止できるわけではないということも、留意しておいてください。
以上です。