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

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


No.933
03/12 12:17

edit