初音さんのためにみっくみく中。
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
8年前のリファレンスを見ながら JavaScript で二重送信防止してみる

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

先のエントリーの関数を onsubmit に、今回のコードを onlick にといちいちするために HTML のテンプレートを書き換えたりするのがめんどくさい、という場合はハンドラへの登録も JavaScript で自動化してしまえばよくて、

  1. body の onload ハンドラで document.forms によりページ内の form をすべて取得
  2. それぞれの form の中に含まれるボタンな要素の onclick プロパティに上記のにメソッドを代入
  3. form の onsubmit プロパティにボタンを disable にするメソッドを代入

と順番に下っていく形でやっていくとうまくいくと思います。

上記記事を見て勉強がてら作ってみることに。

最近 JSAN なんてものを見つけて JavaScript 熱が再燃したのはいいのだけれど、Netscape が 3とか4とかの時期にちょっとかじったくらいなのでさっぱりわからない。何時からこんな便利くさい関数(いや、メソッドか?)が?かろうじて読めるけど、全然書けませんよ?
私の知っているJavaScriptと言ったらアレですよ?むやみにステータスバーに文字が踊ったりとかですね?

というかなんだかこのリファレンスなんの役にもたたないーっ?!

出直してきます……orz

というわけでコピペコピペでなんとか形に。 HTML 上で JSAN.js と bar.js を script 要素で指定したらそれでおしまいということにしてみました。ついでに、form target 属性で別窓開く場合は無効にしています。無駄に。

あと、JSANで、Prototypeと、それが使用するファイルとってこないと動きません。実に無駄なことに。

test.html
<script type="text/javascript" src="/static/js/lib/JSAN.js"></script>
<script type="text/javascript" src="/static/js/bar.js"></script>

...

<form action="foo.cgi" method="get">
    <input class="button" name="baz" type="submit" value="baz送信" />
</form>
bar.js
var jsan = new JSAN('/js/lib', 'lib');
jsan.use('DSS');

var dss = new DSS();
window.onload =  function() {
  dss.setDisableSubmitButtons();
};
DSS.js
if ( ! jsan ) jsan = new JSAN();
jsan.use('prototype');


var DSS = Class.create();
DSS.prototype = {
  initialize : function(){
  },

  setDisableSubmitButtons : function(){
    var forms = document.forms;
    var form = null;
    var obj = this;
    for (var i = 0; i < forms.length; i++) {
      form = forms[i];
      if (form.target.length == 0 || form.target == "_self"){
        if (!form.onsubmit) {
          var elements = form.elements;
          var element = null;
          for (var i = 0; i < elements.length; i++) {
            element = elements[i];
            if ((element.type || "").toLowerCase() == "submit") {
              element.onclick = function() { obj.setHiddenValue(this); };
            }
          }

          form.onsubmit = function() { obj.disableSubmitButtons(this); };
        }
      }
    }
  },

  disableSubmitButtons : function(form) {
    form = $(form);
    var elements = form.elements;
    var element = null;
    for (var i = 0; i < elements.length; i++) {
      element = elements[i];
      if ((element.type || "").toLowerCase() == "submit") {
        this.disableElement(element);
      }
    }
  },


  disableElement : function() {
    var element = null;
    for (var i = 0; i < arguments.length; i++) {
      element = $(arguments[i]);
      if (element) {
        element.disabled = true;
      }
    }
  },

  setHiddenValue : function(button) {
    if (button.name) {
      var q = document.createElement('input');
      q.type = 'hidden';
      q.name = button.name;
      q.value = button.value;
      button.form.appendChild(q);
    }
  }
};

今度リファレンス買いなおしてこよう……orz

スポンサーサイト
コメント
この記事へのコメント
JavaScriptはページを飾ったりするオマケと思いがちですが、なんか本格的なオブジェクト指向言語らしいので面白そうに思うんだけど、一時間もwebをうろついておもむろにJavaScriptコンソールを開いてみると、ソースを見てもサッパリわからないエラーと警告の山で触る気が薄れてしまったりします。
2005/08/09(火) 21:11:33 | URL | 遊び人 #-[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。