フォームのsubmitボタンの２度押しを防ぐ

概要

フォームの submit ボタンの２度押しを防ぐ方法です。
単純に自力で submit ボタンクリック時に disabled に変更する手法でも良いのですが、jQuery を使うことにより簡単に実現できます。

サンプル：submitボタンの２度押し回避

基本的には、私が参考にした http://neta.ywcafe.net/001046.html の方がより詳しいです(/_＼;)

使用方法

配布サイト？の http://www.evanbyrne.com/article/jquery-disable-on-submit-plugin からプラグイン JavaScript を取得しても良いのですが、内容は以下の通りです。

 /*
  * jQuery Disable On Submit Plugin
  * http://www.evanbot.com/article/jquery-disable-on-submit-plugin/13
  *
  * Copyright (c) 2009 Evan Byrne (http://www.evanbot.com)     
  */
 $.fn.disableOnSubmit = function(disableList){
        
        if(disableList == null){var $list = 'input[type=submit],input[type=button],input[type=reset],button';}
        else{var $list = disableList;}
        
        // Makes sure button is enabled at start
        $(this).find($list).removeAttr('disabled');
        
        $(this).submit(function(){$(this).find($list).attr('disabled','disabled');});
        return this;
 };

上記 JavaScript を disableOnSubmit.js として作成します。
submit ボタンの２度押しを防ぎたい HTML ファイルの head タグ内で、以下のように記述します。

 <script type="text/javascript" src="jquery.js"></script>
 <script type="text/javascript" src="disableOnSubmit.js"></script>
 <script type="text/javascript">
  $(function(){
      $('form').disableOnSubmit();
  });
 </script>

これで、この HTML ファイル内の全てのフォームで、submit ボタンの２度押しを防ぐことができます。
なお、特定のフォームだけ２度押しを防ぎたい場合には、id なり、class なりを駆使すれば実現可能です。