【Laravel】jQueryで同フォーム内に複数あるsubmitボタンを判別して処理を分ける

はじめに

片方のsubmitではバリデーションをかけて確認画面へ遷移、もう片方はセッションを保持して戻るボタンにする。
セッションを保持するため同ルートを経由したい。

セッション保持のControllerのコードは省略します。

フォーム

<form method="POST" action={{ route('hoge.post') }}>
    <input type="checkbox" value="1">1
    <input type="checkbox" value="2">2
    <input type="checkbox" value="3">3
    <button type="submit" value="confirm">確認画面へ</button>
    <button type="submit" value="back">前に戻る</button>
</form>

jQuery

フォームにtype="hidden"のinput要素を挿入してクリックされたボタンのvalue属性で判別します。

// フォームにtype="hidden"のinput要素を挿入
$('form').append('<input name="key" type="hidden" value="" />');

// 戻るボタンが押された場合、挿入した要素のname属性を変更
var key =$('input[name=key]');
$('button[value="back"]').click(function() {
    $(key).val($(this).val());
});

$('form').submit(function() {
    // name属性がbackだったらそのままrouteにとばす
    if($(key).val() == "back"){
        return true;
    }
    // backじゃなかったらチェックを確認してrouteへ
    var checkboxList = $('input[type='checkbox']');
    for (var i = 0; i < checkboxList.length; i++) {
        if ($(checkboxList[i]).prop('checked') == true) {
            return true;
        }
    }
    // チェックがなかったらフォームを送信しない
    return false;
});

これで問題ないはず。。

終わりに

稚拙な文章、コードですがここまで読んでくれてありかとうございました！
jQueryむずかちいと思ってたけど実装できてうれしかった

参考

複数のsubmitボタンをonsubmitで判定する方法: 小粋空間