値を引き継いで結果を表示するHTMLページ
○やりたいこと
1：質問に答えていき、最終的に答えを提示（例：あなたは○○です）するHTML（PHPでも可）ページ
2：次ページへ遷移し、同じことを繰り返す（前のページの答えに関わらず同じページを表示する）
3：上記をもう一度繰り返す（合計3ページ）
4：最終的に表示したい要素を表示（例：あなたに必要なのは○○と××です）
○実現しようとしたやりかた
・HTMLのformにパラメーターをもたせて、次ページへ遷移させる
○つまずいた理由
・1ページめから2ページめへは値が引き継げたが、3ページ目に1ページめの値が引き継げなかった
・質問の選択を間違えて戻った時も値を保持していたい
○お願いしたいこと
・補足ページにあるサンプルを元に、3ページめまで値を引き継ぐHTMLを完成したい
・最後に要素（例：あなたに必要なのは○○と××です）が表示されるよう、スクリプトを書いていただきたい
・選択を間違えて前の質問に戻る際にも、値を保持していたい
○要件
・（環境の都合により）なるべく簡素なソースで実現したい
よろしくお願い致します。
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する
ベストアンサー
-
a-kuma3
満足500pt
こんな感じかと。
1ページ目
<form name="F11" action="2.html" method="get"> <input type="hidden" name="v1" value=""> <input type="submit" value="送信" onClick="document.F11.v1.value='1-1';"> </form> <form name="F12" action="2.html" method="get"> <input type="hidden" name="v1" value=""> <input type="submit" value="送信" onClick="document.F12.v1.value='1-2';"> </form>
ほぼ変わらず。
FORM の name をユニークにして、値を変えただけ。2ページ目
<form name="F21" action="3.html" method="get"> <input type="hidden" name="v1" value=""> <input type="hidden" name="v2" value=""> <input type="submit" value="送信" onClick="document.F21.v2.value='2-1';"> </form> <form name="F22" action="3.html" method="get"> <input type="hidden" name="v1" value=""> <input type="hidden" name="v2" value=""> <input type="submit" value="送信" onClick="document.F22.v2.value='2-2';"> </form> <script> window.addEventListener("DOMContentLoaded", function() { window.location.search.substring(1).split("&").forEach(function(p) { var kv = p.split("="); if (kv.length == 2) { Array.prototype.forEach.call(document.querySelectorAll("form"), function(f) { if (f[kv[0]]) { f[kv[0]].value = kv[1]; } }); } }); }); </script>
FORM の変更点は 1ページ目と同様。
ページを読み込んだときに、1ページ目から渡されたパラメータを
FORM の v1 にセットする。3ページ目
<script> var item_map = { "1-1": "サンプル1", "1-2": "サンプル2", "2-1": "サンプル3", "2-2": "サンプル4", "3-1": "サンプル5", "3-2": "サンプル6", }; function add_item(id) { var e = document.getElementById("item"); var item = document.createElement("div"); item.innerHTML = item_map[id]; e.appendChild(item); } window.addEventListener("DOMContentLoaded", function() { window.location.search.substring(1).split("&").forEach(function(p) { var kv = p.split("="); if (kv.length == 2) { add_item(kv[1]); } }); Array.prototype.forEach.call(document.querySelectorAll("#select > li > a"), function(a) { a.addEventListener("click", function(ev) { console.log(ev.target); add_item(ev.target.dataset["item"]); }); }); }); </script> <p>あなたはCですか？</p> <ul id="select"> <li><a href="#last" data-item="3-1">はい</a></li> <li><a href="#last" data-item="3-2">いいえ</a></li> </ul> <div id="last"> あなたに必要なのは、 <div id="item"> </div> </div>
ページを読み込んだときに、1ページ目と2ページ目で選択した
値を元に「あなたに必要なのは、」以下を表示。
3ページ目の選択肢をクリックしたときに、選択肢に従って、
「あなたに必要なのは、」以下に追加。 -
その他の回答
-
cafe-beret
○サンプルコード 1ページ目 <p>あなたはAですか？</p> <ul> <li><a href="#1_1">はい</a></li> <li><a href="#1_2">いいえ</a></li> </ul> <div id="1_1"> <p>あなたに必要なのは以下です。</p> サンプル1 <form name="F1" action="2.html" method="get"> <input type="hidden" name="v1" value=""> <input type="submit" value="送信" onClick="document.F1.v1.value='12345';"> </form> 2ページ目 <p>あなたはBですか？</p> <ul> <li><a href="#2_1">はい</a></li> <li><a href="#2_2">いいえ</a></li> </ul> <div id="2_1"> <p>あなたに必要なのは以下です。</p> サンプル3 <form name="F2" action="3.html" method="get"> <input type="hidden" name="v2" value=""> <input type="submit" value="送信" onClick="document.F2.v2.value='67890';"> </form> </div> 3ページ目 省略 最終ページ（で実現したいこと） あなたに必要なのは、 サンプル1 サンプル3 サンプル5 です。
-
cafe-beret
ありがとうございます。完璧にやりたいことが実現しました！
この度は本当にお世話になりました。
この質問へのコメント
質問の情報
- 登録日時
- 2017-08-11 18:03:33
- 終了日時
- 2017-08-13 09:51:45
- 回答条件
- 1人50回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
iPhoneです。LINEの呼び出し音（テッテッテッテレ、テッテッテッチャラン ♪ ）を消す方法を教えてください…
yasunchi
1
-
こんにちは 現在副業を考えているのですが、 本業で36協定を結んでおり1ヶ月の残業時間が45時間までとなっ…
匿名質問者1
-
メディバンペイントについて質問です ペンで線を引こうとしたとき、ペン先より後に遅れて表示されます。ラ…匿名質問者2
1
-
メディバンペイントについて質問です ペンで線を引いたとき、ペン先より後に遅れて表示されます。ラグ？が…匿名質問者
-
フィリピンのマニラ空港は徒歩で空港内に入れないようで、チケットがなくてもタクシーで空港内に入れるので…匿名質問者
今後共精進したいと思います。