データをいろいろ入力するフォームを作ったときに、
「送信ボタンを何度も押さないでください」みたいなこと書くのダサいなと思ったので、そもそも送信ボタンを何度も押せないような仕様にしてみた。
そして、ソースはこちら
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>フォームサンプル</title> <script type="text/javascript"> // 送信ボタンが押されたら、送信ボタンを使えなくする function attention() { var at_txt = '完了の表示が出るまでお待ちを。' document.getElementById("attention").innerHTML= at_txt; document.getElementById('submit').disabled = true; } // 同ページにフォームの内容を送信するなら、ボタンを復旧する function finish() { alert( "処理を終了しました。"); var at_txt = '処理を終了しました。' document.getElementById("attention").innerHTML= at_txt; document.getElementById('submit').disabled = false; } </script> </head> <body> <div class="main"> <h1>フォーム</h1> <form action="form.html" method="post" onSubmit="attention()"> <textarea name="data" rows="16" cols="25" placeholder='ここにデータ入力 (今回は処理への反映なし)'></textarea><br> <button id="submit" type="submit"> 送信 </button> </form> <p id="attention"><p> </div> <?php if($_POST["data"]){ //時間のかかる処理 sleep ( 5 ); //すべて表示したあとに通知アラーム+ボタン復旧 echo '<script type="text/javascript">finish()</script>'; } ?> </body> </html>
注目すべきところとしては、
formタグに onSubmit="attention()" と設定して、
送信ボタンが押されたときに、Javacriptのattention()を呼び出し。
idが'submit'のボタンを disabledに設定して、ボタンを押せなくしています。
また、同ページにフォームの内容が送信される場合は、処理が終えた後に復旧しないといけないので、disabled = false; として、ボタンの無効化を取り消してます。
これで、送信ボタン連打は防げるはず…!