送信ボタン連打防止スクリプト

/web/javascript

Note: この記事は、3年以上前に書かれています。Webの進化は速い!情報の正確性は自己責任で判断してください。

送信ボタンの連打防止スクリプト。1フォーム複数ボタンに対応。

テストフォーム

  1. ボタンクリック
  2. submitとimageとresetを無効にする(複数可)
  3. フォーム送信

...みたいな流れ。用途としては、主に処理待ち中に送信ボタンを連打することによって起こる、複数投稿を回避する目的で使う。

HTML

  1. <form action="" method="get" onsubmit="return onceOnly(this);">
  2. <fieldset>
  3. <legend>テストフォーム</legend>
  4. <p>
  5. <input type="text" name="test" value="" />
  6. <input type="submit" value="送信" />
  7. <input type="reset" value="取消" />
  8. <input type="image" src="" alt="画像" />
  9. </p>
  10. </fieldset>
  11. </form>

Script

  1. var exec = false;
  2.  
  3. function onceOnly(thform) {
  4. if(exec == true){ return false; };
  5.  
  6. exec = true;
  7. obj = thform.getElementsByTagName('input');
  8. for (i=0; i < obj.length; i++) {
  9. if((obj[i].type) == 'submit' ||
  10. (obj[i].type) == 'image' ||
  11. (obj[i].type) == 'reset') {
  12. obj[i].disabled = true;
  13. };
  14. };
  15. alert('ボタン、無効になってるでしょ?');
  16. return true;
  17. };

memo: alertはチェック用なので、実用の際は外したほうが良いでしょう。

postscript: 改訂版をアップしました。

Note: スパム対策が面倒なので、コメント投稿を廃止しました。以前のコメントは残します。
ご意見・ご要望はtwitter@sigwygかはてブコメントにて。