2度押し禁止(原始的な方法で)

http://hori-uchi.com/archives/000435.html

上のサイトのようにprototype.js でやれれば良かった(d:id:smeghead:20070223:1172222164)のですが、未だにNN6対応があるため、使えませんでした。NN6では、Event.observeが有効になってくれないようでした。

そのため、原始的な方法で対応しました。formのsubmit時のみ、そのformに含まれるtype属性がsubmitのボタンを無効にしています。そうゆう仕様なので、リンクやtype属性がbuttonのボタンなどから、submitしている場合は、効きません。

type属性がsubmitのボタンだけでなく、formも無効にしちゃえば良いのかな？

disabledDoubleSubmit.js(2度押し防止jsファイル)

//submitボタンの2度押し禁止対応
//全てのformのsubmitイベントの発生時に、formに含まれるsubmitボタンを無効化する。
_addEventListener(window, 'load', function() {
var forms = document.forms;
for (var i = 0; i < forms.length; i++) {
var form = forms[i];
_addEventListener(form, 'submit', function(e) {
var target = e.target || e.srcElement;
var len = target.elements.length;
for (var j = 0; j < len; j++) {
var element = target.elements[j];
if (element.type == 'submit') element.disabled = true;
}
});
}
});
function _addEventListener(obj, eventName, func) {
if (obj.addEventListener) {
obj.addEventListener(eventName, func, false);       //NN, Firefox, etc
} else if (obj.attachEvent){
obj.attachEvent("on" + eventName, func);            //IE
} else {
obj[eventName] = func;
}
}

2007/03/21追記：if (form.elements[j].type = ‘submit’) 代入してましたorz…ので直した。

2008/05/26追記：レキシカル環境のform変数が上書きされていたため、複数のフォームが存在するページでは、最後のフォームのsubmitボタンだけが、無効になっていました。submitされたフォームのsubmitボタンが無効になるように修正しました。

HTML(disabledDoubleSubmit.jsを読み込む)

<html>
<head>
    <script type="text/javascript" src="disabledDoubleSubmit.js"></script>
  </head>
<body>
<form action="http://localhost/">
<input type="submit">
</form>
</body>
</html>

これで、各formのonsubmitイベント発生時にsubmitボタンのdisabled属性をtrueに更新するように設定することができました。

週記くらい

2度押し禁止(原始的な方法で)

disabledDoubleSubmit.js(2度押し防止jsファイル)

HTML(disabledDoubleSubmit.jsを読み込む)

3件のコメント

コメントする