form送信処理をしてるページを再読込すると送信がお代わりされる。
お代わりの原因はブラウザの機能で戻れる点にある。
ブラウザの機能を切った状態で戻りたい場合(確認画面→入力画面)、formで処理する必要がある。
っていう状況に迫られた場合の対処法。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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></p> <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> |
制御自体はjsで行う。
ページが読み込まれた時、履歴を弄って戻るが出来ない状態にする。
で、submitが押された時にaction先を変更。
formには「aaaa.php」に飛ぶように書いてるけど、buttonをクリックすると「bbbb.php」もしくは「cccc.php」に遷移する。 他のところでは「$(‘form’).attr(‘action’, url);」の後に「$(‘form’).submit();」も書いてたりするけど、これがあるとrequiredが無視されて必須項目が死んでしまう。
欠点
jsを切られた状態では機能しない。
でも、今時というか以前からjsを切ってる人はだいぶへそ曲がりというかレアケースだったんで無視。
コメント