[jQuery]クリックするsubmitによりaction先を変更する方法

2019/6/27 WEB

Reading Time: < 1 minute

form送信処理をしてるページを再読込すると送信がお代わりされる。
お代わりの原因はブラウザの機能で戻れる点にある。
ブラウザの機能を切った状態で戻りたい場合（確認画面→入力画面）、formで処理する必要がある。
っていう状況に迫られた場合の対処法。

サンプルと解説

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script>
//戻る禁止
history.pushState(null, null, null);
$(window).on("popstate", function (event) {
    if (!event.originalEvent.state) {
        history.pushState(null, null, null);
        return;
    }
});
//action先変更
function setAction (url){
	$('form').attr('action', url);
}
</script>
<form action="aaaa.php" method="post">
	<button type="submit" onclick="setAction('bbbb.php')">bbbb.php</button>
	<button type="submit" onclick="setAction('cccc.php')">cccc.php</button>
</form>

//戻る禁止

history.pushState(null, null, null);

$(window).on("popstate", function (event) {

if (!event.originalEvent.state) {

history.pushState(null, null, null);

return;

}

});

//action先変更

function setAction (url){

$('form').attr('action', url);

}

</script>

</form>

制御自体はjsで行う。
ページが読み込まれた時、履歴を弄って戻るが出来ない状態にする。
で、submitが押された時にaction先を変更。
formには「aaaa.php」に飛ぶように書いてるけど、buttonをクリックすると「bbbb.php」もしくは「cccc.php」に遷移する。

他のところでは「$(‘form’).attr(‘action’, url);」の後に「$(‘form’).submit();」も書いてたりするけど、これがあるとrequiredが無視されて必須項目が死んでしまう。

欠点

jsを切られた状態では機能しない。
でも、今時というか以前からjsを切ってる人はだいぶへそ曲がりというかレアケースだったんで無視。