フォームに入力したデータの二重送信を防ぐために、送信ボタンを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>
<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>
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'];
?>
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>
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イベントが生ぜず、フォームデータが送られないことが確認できます。
ということで、よろしくどうぞ。
コメント