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ボタンを押せなくして多重ポストを防ぐとか、簡単にできるんだけど、実際に実装してるところは少ないよね。そういう面で好感が持てる。

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

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