送信ボタンを１回しか押せないフォーム作った

プログラム

f:id:alfe1025:20140213112925p:plain

データをいろいろ入力するフォームを作ったときに、
「送信ボタンを何度も押さないでください」みたいなこと書くのダサいなと思ったので、そもそも送信ボタンを何度も押せないような仕様にしてみた。

デモ

そして、ソースはこちら

<!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; として、ボタンの無効化を取り消してます。

これで、送信ボタン連打は防げるはず…！