【JavaScript】フォームの送信ボタンを1回押したら即座に無効にするスクリプト。

フォームに入力したデータの二重送信を防ぐために、送信ボタンを1回押したらすぐに無効にして2度押しできないようにしたい。

方針としては…

フォームの onsubmit イベントを検知したら、送信ボタンの disabled 属性を true にする。

…という JavaScript を書いてやれば良さそうです。

送信ボタンの onclick イベントまたは onmouseup イベントの検知による操作では、データが正常に送信されません。

理由は後述。

簡単な送信フォームを用意します。

<form method="get" action="test.php" target="result" id="testform">
        <input type="hidden" name="t" value="送られたかな">
        <input type="submit" value="送信" id="btn">
</form>

<iframe name="result"></iframe>

送信ボタンを押すと "送られたかな" という文字列を test.php に送信して、その文字列が下のフレームに表示される、という単純なフォームです。

JavaScriptは以下のような感じ。

<script>
function on_submit(){
    // submitイベントが発生したらアラートを表示。
    alert('submitted!');
    // ボタン 'btn' を disabled に。
    document.getElementById( 'btn' ).disabled = true;
}

// フォーム 'testform' で submit イベントが発生したら、関数 on_submit() を呼ぶ。
document.getElementById( 'testform' ).addEventListener( 'submit' , on_submit );
</script>

test.php はシンプルに…

<?php
    echo $_GET['t'];
?>

実際に設置してみたのが以下。

想定どおりの動作をしてくれました。

さて。

「フォームの送信ボタンを押す」→「フォームデータが送信される」という動作を一連で見てみると、

ボタンをクリック → ボタンでmouseupイベント発火 → ボタンでclickイベント発火 →フォームでsubmitイベント発火 → フォームデータ送信

…という流れのようです。

で、「フォームのsubmitイベントをキャプチャする」という上記のようなコードではなく、「ボタン自身のmouseup/clickイベントをキャプチャしてボタンを無効にする」コードを書くと、ボタンが無効になった瞬間にこの一連の流れが止められて、フォームでsubmitイベントが発火せず、データ送信が行われない…という、意図しない動きになってしまうみたい。

上の例のJavaScriptを以下のものにすげ替えて、試してみてください。

<script>
function on_click(evt){
    // ボタンがクリックされたら disabled に。
    evt.target.disabled = true;
}
function on_submit(){
    // submitイベントが発生したらアラートを表示。
    alert('submitted!');
}

// フォーム 'testform' で submit イベントが発生したら、関数 on_submit() を呼ぶ。
document.getElementById( 'testform' ).addEventListener( 'submit' , on_submit );
// ボタン 'btn' で click イベントが発生したら、関数 on_click() を呼ぶ。
document.getElementById( 'btn' ).addEventListener( 'click' , on_click );
</script>

実際に試してみると…

submitイベントが生ぜず、フォームデータが送られないことが確認できます。

ということで、よろしくどうぞ。

カテゴリ:

タグ: