onsubmit で submit ボタンを disable にしてユーザビリティを良くする

トップ > 2005年08月03日 > onsubmit で submit ボタンを disable にしてユーザ...

August 03, 2005

■ onsubmit で submit ボタンを disable にしてユーザビリティを良くする

先の Yahoo! Shopping のアプリケーションで、今度ちょっとやってみようと思ってたことを実装してみた。

http://bloghackers.net/~naoya/ys/app.cgi

ボタンを押したときに、そのボタンが disable になります。この方法を使うとボタンが押されて次の処理に入ろうとしているというのが直感的に分かるのと、二重送信防止にもなるということでユーザビリティが改善できます。

仕掛けはすごく簡単で、form の onsubmit ハンドラに、その form に紐づく submit ボタンを disable になるような JavaScript を登録しておくだけ。

function disableSubmit(form) {
  var elements = form.elements;
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].type == 'submit') {
      elements[i].disabled = true;
    }
  }
}

という関数を用意しておいて、

<form method="get" onsubmit="disableSubmit(this)">
  <input type="text" name="q">
  <input type="submit" value="search">
</form>

と、onsubmit に指定すれば ok。

たとえばsubmitしたらJavaScriptでsubmitボタンを押せなくして多重ポストを防ぐとか、簡単にできるんだけど、実際に実装してるところは少ないよね。そういう面で好感が持てる。
川o・-・）＜2nd life - FEEDBRINGER

もとはと言うと、このエントリーを読んで「へえ」と思い実際 Feedbringer を触ってみてこれはいいなと思い今度やってみようと思っていたものです。Feedbringer では body の onload 時にまとめて document.forms で form 全部を取得して onsubmit ハンドラへのイベント登録をやっていて、よりスマートな感じですね。

はてなのサービスにも搭載していきたいなあ。

Permalink | コメント(7) | トラックバック(1) | 16:18

コメント一覧

kenboo! 2005/08/03 17:05 無効にしつつ、「検索中」なんてしたりしますよね。

非常に簡単なんですが、何故か後回しにしていて、、、
サイトによって実装してたり実装していなかったりとマチマチにしてしまうのですが :p

http://ameblo.jp/kenboo/

masatobito 2005/08/03 17:41 type=”image”
ではうまく動作しないようです。

もちろん
if (elements[i].type == ’image’) {
elements[i].disabled = true;
}
での話

mattarin 2005/08/03 19:58 あるサイトでは、こんな風に使われてました。

function submitChecker(form){
if ( document.clickChecker.clickCounter.value == ”0” ){
document.clickChecker.clickCounter.value = ”1”;
form.goButton.disabled = true;
form.submit();
}
}
function returnChecker(){
if ( document.clickChecker.clickCounter.value != ”0” ){
document.mainForm.goButton.disabled = true;
}
}

<input type=”button” value=”送信” name=”goButton” onClick=”submitChecker(this.form);”>

Asarima 2005/08/04 09:17 type=”image”も考慮するなら、以下のようにした方がよいです。
elements[i].onclick=nosubmit;
function nosubmit() {
return false;
}

KaZ 2005/08/04 11:42 最近は中断ボタンも利用されなくなりつつあるのかな。
他にも新しいウィンドウを開くとか、別フレームに出すとか。
４年前ではそういった諸事情により却下されましたorz
コード例でいくと下記みたいな感じかな。3)は最凶です;-)
1)onClick=”this.disabled=true”
2)onClick=”this.disabled=true;this.form.submit();”
3)onClick=”style.display=’none’”

RIKKUN 2005/08/04 12:16 「２重送信防止のためのボタンのロック」って、
レスポンスが上手く来なかったりした時に、ユーザーはどうしようもなくなるのかな～
と思って実装出来ずにいたんですが、「中断」ボタンを用意しとけばいいんですね。勉強になりました。
あと、submitボタン自体を非表示にするなんて技もあるようですね。
試したこと無いですけど。

bigwest 2005/08/04 15:19 私は、ファイルアップロードなどの長い処理の時に、submitボタンをスタイル変更でフラットにしてしまい、ボタンに見えないようにします。
その上で、「送信」だったボタンの文字列を「アップロード中。。。」というように、変えています。
中断ボタン、確かに必要ですね。自分の今やっているのもつけないと、確かに、ボタンがなくなってしまうと、どうしようもなくなる。

はてなユーザーのみコメントできます。はてなへログインもしくは新規登録をおこなってください。

トラックバック - http://d.hatena.ne.jp/naoya/20050803/1123053496

idトラックバック

リンク元