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

<script type="text/javascript">
    $(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 );
        });
    });
});
</script>
No.1681
01/31 16:36

edit