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

送信ボタンをボタン連打や二重送信を防止しつつ「送信中」を表示する

● 送信ボタンクリック時にボタン連打や二重送信を防止しつつ「送信中」を表示する

● html

classnotrepeat を追加

<button type="submit" class="notrepeat">データ送信</button>

任意のテキストとアイコンをセットすることもできます。

<button type="submit" class="notrepeat" data-loading-text="<i class='fa fa-circle-o-notch fa-spin'></i> データ送信中ですしばらくお待ちください。 ...">データ送信</button>

● js

以下の js を読み込ませる

jquery.notrepeat.js

$(document).ready(function() {
    $('.notrepeat').each(function(index, element){
        $(this).click(function () {
            if ( $(this).data('loading-text') ){
                $(this).html( $(this).data('loading-text') );
            }
            else {
                $(this).html("<i class='fa fa-circle-o-notch fa-spin'></i> データ送信中 ... ");
            }
            var jq_obj = $(this);
            setTimeout( function() {
                jq_obj.attr('disabled', true);
            }, 1, jq_obj );
        });
    });
});
No.1681
07/23 16:46

edit