ボタンの二度押し防止JavaScript
Posted at 2007-04-13 22:34
今さら感が色濃く漂う話題ですが、submitなボタンの二度押しを防ぐために、内容を送信するときに呼び出されるform要素のonsubmit属性を利用して、送信ボタンを使えなくする試み。フォームが便利（っぽい感じ）になるので、とりあえず一番手軽な方法を。
手軽な方法
<form action="..."
onsubmit="this.submitBtn.disabled = true;">
...
<p><input type="submit" value="送信" name="submitBtn" /></p>
</form>
submitボタンが押されると、submitボタン自身がdisabled（使用不可）になります。
ただし、ブラウザの戻る機能で戻ってきたときに、ボタンがdisabledのままになってしまいますので、注意が必要です。別にそれでもいいや、という場合には構いませんが、困るのであれば次の方法をどうぞ。
戻ってきてもだいじょうぶな方法
前の方法に加えて、form要素にname属性とid属性（2つの値は同じもの）を書きます。
<form action="..." name="myForm" id="myForm"
onsubmit="this.submitBtn.disabled = true;">
...
<p><input type="submit" value="送信" name="submitBtn" /></p>
</form>
name属性は、過去の遺物との互換性を保つために（id属性と同じ値を）指定します。XHTML 1.0のStrict DTDやXHTML 1.1では、form要素にname属性を書けないので、id属性だけ書きます。
それから、body要素のonunload属性に、設定を戻す記述をしておきます。
<body onunload="document.myForm.submitBtn.disabled = false;">
これで、ブラウザの戻る機能で戻ってきたときでも、ボタンが使えるようになります。
ほんとうは、HTML/XHTMLの中にスクリプトを書きたくないところですが、短期的な使い捨てページ（？）などでは、気軽にちょろっと書ける、こういった割り切った方法が気楽でいいと思います（コード量が違いすぎます）。そのへんは色々な状況とトレードオフかと。
Tagged with: JavaScript, web design, XHTML
Paging
- Next Story:
- ログイン画面の書き換え for Windows XP