JavaScriptプログラムに関する各種メモ書き

jQueryでフォームのsubmitボタンの二重送信防止する

■ jquery.disableOnSubmit.js

が便利です。

http://bitarts.jp/blog/archives/003743.html

使い方

HTML

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.disableOnSubmit.js"></script>

HTML

<form id="FM">
</form>

JavaScript

$(function() {
  $("#FM").disableOnSubmit();
});

とするだけです。

ただしページ遷移後にブラウザの「戻る」ボタンで戻ってきた場合に二度とボタンが押せなくなるので、

それを修正したバージョンがこちら

スクリプト : ファイル名「jquery.disableOnSubmit.js」で保存してください

(function() {
	$.fn.disableOnSubmit = function(config) {
		var config = $.extend({
			timeout: 7000
		}, config);
		var buttons = $(":submit, :image", this);
		buttons.bind("click",function() {
			var hidden = $("<input />").
				attr("type", "hidden").
				attr("name", $(this).attr("name")).
				attr("value", $(this).attr("value"));
			$(this).after(hidden);
		});
		$(this).bind("submit",function() {
			buttons.attr("disabled", true);
			setTimeout(function(){
				buttons.attr("disabled", false);
			}, config.timeout);
		});
		$(window).unload(function(){
			buttons.attr("disabled", false);
		});
		return this;
	};
})(jQuery);

jQuerty Form disable on submit

(c) BitArts, Inc. (http://bitarts.jp)

Author: Tatsuya Miyamae <miyamae@bitarts.co.jp>

オリジナルのダウンロードは : http://goo.gl/XdRQg7

No.933
03/12 12:17

edit