formのimageタイプのボタンをjQueryで二重クリック防止

HTMLフォームのsubmitボタンを連続でクリックしてしまうと、意図しないデータが多重に送信されてしまうという問題があります。

これを防止するために、JavaScriptで二重にクリックするのを抑止する方法があります。
シンプルなしくみだと、一度クリックされたらフラグをオンにしてボタンクリックを無効にしたり、押されたボタンにdisabledをセットして非活性にしてしまうなど、比較的簡単な処理で済みます。しかし、深いところまで突き詰めて完全に抑止しようとすると、めんどくさい設計と処理を実装が必要となります。さらに、コーディング規約やフレームワークのルールなどで制限されている環境だと、さらに難しい問題となってふりかかります。

例えば、今回私が実装した環境では以下のような前提がありました。

• サブミットまでの処理で極力JSを使わない
• フォームのボタンタイプは「type=”image”」
• 複数のボタンが存在しサーバ処理を分岐している

フラグを用いた方法だと、複数個所にJSを埋め込む必要があったので、却下しました。また、disabledをセットする方法では押されたボタンの情報はPOSTされないので、サーバ側でどのボタンが押されたのか判断できなくなるため、却下しました。

そこで、考え出したのが以下の方法です。
「type=”image”」のボタンが押されたら、そのボタン自信は非表示にし、代わりに画像を表示します。

例えば、以下のように複数のボタンがあるとします。

<input type="image" name="back" src="/img/btn_back.jpg" alt="戻る" />
<input type="image" name="cancel" src="/img/btn_cancel.jpg" alt="キャンセル" />
<input type="image" name="submit" src="/img/btn_submit.jpg" alt="登録" />

name属性の値を分けることでサーバ側でボタン判定できます。今回はその詳細については割愛します。

起票時にjQueryを読み込み、以下のコードを実行します。

$(':image').click(function(){
	$(this).hide();
	$(this).after('<img src="' + $(this).attr('src') + '" />');
});

ボタンがクリックされたら、そのボタンを非表示にすると同時に、画像のパスを抜き出してimgタグを挿入します。
2回目にクリックする場合には画像がクリックされているだけなので、処理は実行されません。

それにしても、そもそも、POSTの際に画面が切り替わる前に2つ以上のリクエストを発行する必要ってあるのでしょうか。
必要がないのであれば、HTMLの仕様として、もしくは、ブラウザサイドで2重クリックを防止してもいいような気がします。