データをいろいろ入力するフォームを作ったときに、
**「送信ボタンを何度も押さないでください」**みたいなこと書くのダサいなと思ったので、そもそも送信ボタンを何度も押せないような仕様にしてみた。
そして、ソースはこちら
<!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">
# フォーム
<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; として、ボタンの無効化を取り消してます。
これで、送信ボタン連打は防げるはず…！