2005-08-08 (Mon)

■ onsubmit で disable にするやつ

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

フォームを送信した時に、submit ボタンを disabled にして二重送信を防ぎましょう、というのがナウなヤングにバカウケ？

そんでもって、ここに書いてあるやつ なら、そこの JavaScript を読み込ませるだけで、自動的に全てのフォームに対して設定が行なわれるので便利。中止ボタン対策もしてあってグッド。

ただ、Deer Park な Firefox で試した所、戻るボタンで戻った場合は disabled が解除されないし、中止ボタンでの復活も効かない様子。

なので、書き直してみました。

var DisableSubmit = {
   init: function() {
      this.addEvent(window, 'load', this.set());
   },

   set: function() {
      var self = this;
      return function() {
         for (var i = 0; i < document.forms.length; ++i) {
            if(document.forms[i].onsubmit) continue;
            document.forms[i].onsubmit = function() {
               self.setDisable(this.getElementsByTagName('input'));
            };
         }
      }
   },

   setDisable: function(elms) {
      for (var i = 0, elm; elm = elms[i]; i++) {
         if ((elm.type == 'submit' || elm.type == 'image') && !elm.disabled) {
            Set(elm);
            unSet(elm);
         }
      }

      function Set(button) {
         window.setTimeout(function() { button.disabled = true; }, 1);
      }
      function unSet(button) {
         window.setTimeout(function() { button.disabled = false; }, 1000);
      }
   },

   addEvent: function(elm, type, event) {
      if(elm.addEventListener) {
         elm.addEventListener(type, event, false);
      } else if(elm.attachEvent) {
         elm.attachEvent('on'+type, event);
      } else {
         elm['on'+type] = event;
      }
   }
}

DisableSubmit.init();

普通に読み込んでもらえれば、勝手に機能が追加されます。

あとは、 submit のパラメータを hidden に指定する 機能を入れればかなり良さそうかな？導入した。

disabled にして欲しくないフォームへの対応も欲しいかなー。

* 2006-07-08 追記

miau's blog? で指摘されていた通り、type='image' で動作しないのと、window.onload を上書きしている問題があったため、そのままコピペして使っても問題が生じる場合があったので、この問題の修正を行ないました。

特に onload に関しては DisableSubmit の中に組み込んでおいたので、今後は本当にそのままコピペしても何も気にせず使えるようになりました。

* 更新履歴

• 2005-08-10 - 少しだけシンプルにしました。
• 2005-08-16 - submit フォームの値も送信出来るように。
• 2006-07-08 - Asarimaさん の指摘通りの修正。type='image' も動作するように。window.onload を上書きしないように

Posted by Kyosuke Takayama at 2005-08-08 (Mon) 23:30