jQueryを使ってフォームの二重送信を防止する方法 複数ボタンの場合編

前回1つのフォームに1つのボタンがあった場合のフォーム２重送信防止方法を記しました。 今回は1つのフォームに複数ボタンが有る場合の2重送信を防止する方法を記します。

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

フォームを送信する前にsubmitボタンにある要素を使って、hiddenタグを作成。 その後ボタンをdisabledにして、送信しています。

ボタンタグにある情報を付加するとフォームが送信できなくなります。 その注意点はこちら。