値を引き継いで結果を表示するHTMLページ


○やりたいこと
1:質問に答えていき、最終的に答えを提示(例:あなたは○○です)するHTML(PHPでも可)ページ
2:次ページへ遷移し、同じことを繰り返す(前のページの答えに関わらず同じページを表示する)
3:上記をもう一度繰り返す(合計3ページ)
4:最終的に表示したい要素を表示(例:あなたに必要なのは○○と××です)

○実現しようとしたやりかた
・HTMLのformにパラメーターをもたせて、次ページへ遷移させる

○つまずいた理由
・1ページめから2ページめへは値が引き継げたが、3ページ目に1ページめの値が引き継げなかった
・質問の選択を間違えて戻った時も値を保持していたい

○お願いしたいこと
・補足ページにあるサンプルを元に、3ページめまで値を引き継ぐHTMLを完成したい
・最後に要素(例:あなたに必要なのは○○と××です)が表示されるよう、スクリプトを書いていただきたい
・選択を間違えて前の質問に戻る際にも、値を保持していたい

○要件
・(環境の都合により)なるべく簡素なソースで実現したい


よろしくお願い致します。

回答の条件
  • 1人50回まで
  • 登録:2017/08/11 18:03:33
  • 終了:2017/08/13 09:51:45
id: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

です。

ベストアンサー

id:a-kuma3 No.1

a-kuma3回答回数4584ベストアンサー獲得回数19242017/08/12 15:06:25

ポイント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ページ目の選択肢をクリックしたときに、選択肢に従って、
「あなたに必要なのは、」以下に追加。

id:cafe-beret

ありがとうございます。完璧にやりたいことが実現しました!
この度は本当にお世話になりました。

2017/08/13 09:52:02

その他の回答(0件)

id:a-kuma3 No.1

a-kuma3回答回数4584ベストアンサー獲得回数19242017/08/12 15:06:25ここでベストアンサー

ポイント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ページ目の選択肢をクリックしたときに、選択肢に従って、
「あなたに必要なのは、」以下に追加。

id:cafe-beret

ありがとうございます。完璧にやりたいことが実現しました!
この度は本当にお世話になりました。

2017/08/13 09:52:02
id:cafe-beret

ありがとうございます。完璧にやりたいことが実現しました!
この度は本当にお世話になりました。

  • id:okamotoy
     サンプルに <input type="hidden" name="" value=""> もありますので,すでにできているようなものだと思います.
  • id:cafe-beret
    コメントいただきありがとうございます。
    今後共精進したいと思います。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません