jQueryでボタンの連続クリック防止策
やりたいこと
- ボタンの2度押しを防止する
- 処理されていることがわかりやすいようにユーザに伝える
実装例
<?php /* PHPで処理を確認しやすいように実装 */ if (isset($_POST['test'])) { sleep(5); echo "処理終了"; } ?> <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>連続クリック防止策テスト</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script> $(function() { $('form').submit(function() { $(this).find(':submit').attr('disabled', 'disabled').val('実行中です'); }); }); </script> </head> <body> <form action="" method="post"> <input type="text" name="test"> <input type="submit" value="送信"> </form> </body> </html>
見てのとおり、PHPで確認しやすいような処理を実装してあります。setTimeout()関数を使っても
良かったのですが、面倒だったので挫折しました(笑)。javaScriptには、javaやpythonなんかにあるsleep
が用意されていないので、ちょっとしたテストのときに苦労します。
