formのactionをボタン押下時に変更させたい

いつもお世話になっております。
フォーム内のボタンの遷移先を分岐させる必要が出てきました。
ラジオボタンの値を変更した時に、遷移先を変更させることは出来たのですが、戻るボタンで戻した時など、うまく動作しません。
例）
初期値(google）でExec→OK
Yahooに変更してExec→OK
戻るボタンで戻してExec→NG（Googleが開く）
Yahooに変更してExec→OK
戻した状態の時にもactionの値をキープする方法はないでしょうか？

html
1<html>
2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
3<script type="text/javascript">
4<!-- 
5window.onpageshow = function(event) {
6	if (event.persisted) {
7		 window.location.reload();
8	}
9};
10$(function () {
11	var val = $('input[name="typ"]').val();
12	if(val == '1'){
13		$(this).parents('form').attr('action', "https://www.yahoo.co.jp/");
14	} else {
15		$(this).parents('form').attr('action', "https://www.google.com/");
16	}
17	// ラジオボタンの選択先に応じてFormのAction先を変える
18	$('input[name="typ"]').change(function () {
19		var val = $(this).val();
20		if(val == '1'){
21			$(this).parents('form').attr('action', "https://www.yahoo.co.jp/");
22		} else {
23			$(this).parents('form').attr('action', "https://www.google.com/");
24		}
25    });
26});
27// -->
28</script>
29</head>
30<body>
31<form action="https://www.google.com" name=f1 method="GET">
32<input type="radio" name="typ" value="1">Yahoo
33<input type="radio" name="typ" value="2" checked>Google<br>
34<input type='submit'>Exec
35</form>
36</body>
37</html>

行動規範の内容に同意します

回答2件

ベストアンサー

localStorageを検討ください

javascript
1<script>
2const typ_default_value=2;
3window.addEventListener('DOMContentLoaded', ()=>{
4  let typ=localStorage.getItem('typ');
5  if(typeof typ=="undefined" || !typ) typ=typ_default_value;
6  document.querySelector(`[name="typ"][value="${typ}"]`).checked=true;
7});
8document.addEventListener('submit',e=>{
9  const typs={1:"https://www.yahoo.co.jp",2:"https://www.google.com"};
10  const typ=e.target.querySelector('[name="typ"]:checked').value;
11  e.target.action=typs[typ];
12  localStorage.setItem('typ',typ);
13});
14</script>
15<form name="f1" method="GET">
16<label><input type="radio" name="typ" value="1">Yahoo</label>
17<label><input type="radio" name="typ" value="2">Google</label><br>
18<input type='submit'>Exec
19</form>

投稿2022/06/16 02:17

yambejp

総合スコア117944

ブラウザによって多少挙動が異なるようですね。Chrome だと（内部的に調整しているのか）不整合は起きませんでしたが、Firefox では action 属性値とラジオボタンの選択肢がちぐはぐになるという問題が確認できました。

js
1$(function () {
2  let $form = $('form');
3  function changeAction(val) {
4    if (val == '1') {
5      $form.attr('action', 'https://www.yahoo.co.jp/');
6    } else {
7      $form.attr('action', 'https://www.google.com/');
8    }
9  }
10
11  // ページ表示時に選択肢に応じて action をセットする
12  let val = $form.get(0).typ.value;
13  changeAction(val);
14
15  // 選択肢が変更された際に action をセットする
16  $('input[name="typ"]').change(function () {
17    changeAction($(this).val());
18  });
19});

$(this).parents('form') をイベントハンドラの外で呼び出しても適切な $(this) が取得できません。上記のように form を取得して処理してください。同じ処理なのでイベントハンドラ内の呼び出しも changeAction のような関数で共通化してしまった方がよいでしょう。

js
1window.onpageshow = function(event) {
2  if (event.persisted) {
3    window.location.href = window.location.href;
4  }
5};

あるいは bfcache が使われたときに location.reload() ではなく location.href を再代入することでスーパーリロード相当のリロードを発生させてしまうのも手ですね。

投稿2022/06/15 11:27

arcxor

総合スコア2857

hatsuzo

2022/06/16 00:54

arcxorさん　早々にアドバイス頂き有難うございます。確かにChromeだと正常に動作していますね。普段使いなのがFirefoxですが、ブラウザ間の違いまで思い浮かびませんでした。お蔭様でサンプルソースはうまく動作しました。実際に使用しているソースはフレームワークを使っているため、ここで展開することは難しいので、必要な部分のみ切り出したものです。これを参考にして実装しようとしているのですが、 let val = $form.get(0).typ.value; のところでエラーが出てしまいます。（Uncaught SyntaxError: redeclaration of var val） get(0)というのはどういう意味なのかご教示頂けないでしょうか？

arcxor

2022/06/16 05:15

> （Uncaught SyntaxError: redeclaration of var val）とある通り、var val を記述しているのが原因です。 > get(0)というのはどういう意味なのか jQuery のドキュメントを読んで頂きたいですが、jQueryオブジェクトの順序集合からインデックスが0、すなわち最初の要素をHTMLElementとして取得するのが get(0) の意味です。 form 要素から typ の value を取得するために、jQuery オブジェクトからHTMLElementを参照しています。

hatsuzo

2022/06/20 01:58

arcxorさん、コメントありがとうございました。お返事が遅れて失礼致しました。フレームワークで生成されるオブジェクトの影響で、オブジェクトの参照対象が変わってしまうようですね。調べ直してみます。

行動規範の内容に同意します

あなたの回答