teratail header banner
teratail header banner
質問するログイン新規登録
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

660閲覧

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

hatsuzo

総合スコア56

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/06/15 09:16

0

0

いつもお世話になっております。
フォーム内のボタンの遷移先を分岐させる必要が出てきました。
ラジオボタンの値を変更した時に、遷移先を変更させることは出来たのですが、戻るボタンで戻した時など、うまく動作しません。
例)
初期値(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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ブラウザによって多少挙動が異なるようですね。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さん、コメントありがとうございました。 お返事が遅れて失礼致しました。 フレームワークで生成されるオブジェクトの影響で、オブジェクトの参照対象が変わってしまうようですね。 調べ直してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.30%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問