jQuery.disableDoubleSubmit / ボタンクリックで多重投稿を防ぐ

jQueryでボタンをクリックすると無効にして、多重投稿を防ぐ。
[JavaScript] jQueryでフォームの2重送信を防ぐ – ありんく tech-log

個別に設定できるようになっています。これを一気に画面全部のボタンに適用してみる。

1
2
3
4
5
6
7
8
9
10
jQuery(funtion(){
var rf_timeout = 1000;
jQuery(':submit,:image,:button').click(function(){
var rf_submit = this;
rf_submit.disabled = true;
setTimeout(function(){
rf_submit.disabled = false;
}, rf_timeout);
});
});

フォーム送信後にボタン情報を必要とする場合は、disabledでデータが送信されなくなるので注意。
これについては下記参照。
Théoden’s Coding Tips » Blog Archive » jQuery: disable the submit button, but still send the button’s value

disableじゃなくてdisplay:noneにするか、クリック時にhiddenを入れるか。
一括でやると弊害もあるな。
<button>と<input>で役割変えたりとかでも回避はできそうだが、トリッキーかな…

Error: Suspended

追記:2010/07/01
問題あったので、いくつか修正。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(funtion(){
var rf_timeout = 1000;
jQuery('form').submit(function(){
jQuery(':submit,:image', this).attr('disabled', 'disabled');
});
jQuery(':submit,:image').click(function(){
var rf_hidden = '<input type="hidden" name="'
+ this.name
+ '" value="'
+ this.value
+ '" />';
jQuery(this).append(rf_hidden);
});
jQuery(':button').click(function(){
var rf_submit = this;
rf_submit.disabled = true;
setTimeout(function(){
rf_submit.disabled = false;
}, rf_timeout);
});
});

Chromeでdisableにするとsubmitイベントが発生しない(フォームが送信されない)ので、:submit, :image は別途処理を用意、clickからsubmitイベントに変更。
Form送信なら画面遷移するはずなのでタイマー復帰も廃止。

Form送信後のPHPなどでボタンのデータを使用する場合もあるので、別途clickイベント後にhiddenでデータを埋め込むよう変更。
※confirmで確認してる場合「いいえ」時にhiddenを消し忘れないよう注意

:buttonについては特に変更なし。
結局もっとトリッキーになった気がする…