jQueryを使ってフォームの二重送信を防止する方法

サーバーサイド側で２重送信されないように処理するのが一般的ですが、 jQueryを使ってsubmitボタンをダブルクリックを防止するサンプルを記します。

<input type="submit" class="disableBtn" value="post">
<script>
    $('.disableBtn').on('click', function(){
        $(this).text('please wait...');
        $(this).attr('disabled', true);
        $(this).closest('form').submit();
    });
</script>

クリックするとボタンの表示が「post」から「please wait...」に変わり、ボタンがクリックできなくなっていることがわかります。

通常なら上記の方法で２重送信を防止することができますが、1つのフォームに複数ボタンがあって、name属性で処理を変更している場合、jQueryの仕様上、submitボタンのname属性が拾えず、上記の方法では対応できません。 その場合の対処法はこちら。