submitボタンを押した瞬間にそれをdisabled（グレイアウト）にすることで二度押ししようにもで...

2010年 2月 3日

タグ： #JavaScript #jQuery

submitボタンを押した瞬間にそれをdisabled（グレイアウト）にすることで二度押ししようにもできなくする、jQueryを使ったスクリプトである。おすすめする理由は次のとおり。

jQueryだから。どうせ他の部分でもjQuery使っていることがあるので、そのついででシンプルなスクリプトで済むのなら、気分的にもラクだ。

オリジナルにスクリプトを書こうとして素直に disabled=true とやるだけだと、次にいったページから「戻る」ボタンで戻られるとdisabledになったまま（Firefoxの場合）というワナがあるのだが、こいつはその点も考慮されている。

どのformに作用させるかを、html側のデザイン次第でどうにでもできる。ページ内の全てのformではなく特定のformにだけ使いたいという場合もあるだろう。
例えばform id=”foo”とform id=”bar”の二か所だけに絞りたければ、
$(‘#foo’).disableOnSubmit();
$(‘#bar’).disableOnSubmit();
と2行書けばいい。

HTMLでは、id属性はwebページ内での重複が許されない。同一ページ内に複数のformがあって、それらにいちいち違うid属性を与えるのが面倒だというのであれば、class属性を使うのがいいだろう。form class=”foo” というclass属性を与えたformタグすべてに対して作用させたければ
$(‘.foo’).disableOnSubmit();
の1行で済む。また、cssではclass属性はタグに複数個設定できる。つまり form class=”aaa bbb” みたいにできるのだから、なんだったらデザイン(見栄え)制御用のclass属性とは別にdisableOnSubmit()専用のclass属性を追加してしまえばいい。

form onSubmit=”hogefunction()” のようにonSubmit属性でJavascriptを呼び出す手法をよく見かける。しかしこれはちょっと危険で、ブラウザの種類によってはJavaScript関数どころかform全体が動かなくなるケースがあるらしい。少し古いケータイ向けフルブラウザに多い。これはinput type=”submit” value=”hoge” onClick=”hogefunction()” のようにonSubmitではなくonClickでやっても似たような危険が伴う。ケースバイケースなのでなんとも言えないが、少なくとも formタグにはid属性やclass属性を指定するだけという手法ならその部分は普通のHTMLに過ぎない。よって、特殊なブラウザであっても動作不良を起こす可能性が低くなるんじゃなかろうかと。

すぐにやめられる(笑)。「やってみたけど気にいらなかった」というときは、headタグ内のJavaScriptを消すだけだ。使わないid属性やclass属性をformタグに残したところで、どんなブラウザであれ動きにも見栄えにもまったく影響は残らない。