プルダウンで選択された値を別ページで表示させたい

解決済

質問者：koji60ja
質問日時：2010/11/11 04:04
回答数：2件

題名の通りなのですが、なかなかマッチする情報がなく苦戦しております。
お力を貸していただけると幸いです。

実現したいのは、簡単にいえば、
http://www.bang.co.jp/?ID=dp844

このサイトのように、プルダウンで選択したデータを次のページで
表示したいと思っています。ただし表示させるだけではなくて
プルダウンで選択された値を遷移先のフォームのhiddenにセットしたいのです。

javascriptであれこれやっているのですが、3日間たってもできておりません。

例えば、a.htmlのプルダウンで、りんごと選ばれて確認と押したら、
b.htmlに遷移し、画面には、りんごと表示されて、

<input type="hidden" name="name" value="りんご">

こういう形にしたいと思っています。

＜a.html＞
選択してください。←プルダウン
りんご
みかん
すいか

注文するボタン

＜b.html＞
果物　　　りんご←前ページで選択された情報が表示されている
送付先　　テキストボックス

確認ボタン

どうかお力添えをお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： yyr446
回答日時：2010/11/11 18:35

動きません。

＝＞
一点不注意ミスしました。
var q = frm.elements["fruit"].options[frm.elements["fruit"].selectedIndex].text);
最後の　）は不要、取り去って下さい。
var q = frm.elements["fruit"].options[frm.elements["fruit"].selectedIndex].text;

<input type="hidden" name="name" value="りんご">
document.forms["hoge"].elements["name"].value = q[1];で、
value値は書き換わるはずです。
type="hidden"ですから、目で見ても解りませんが、最初
<input type="hidden" name="name" value="">
としておいても大丈夫です。

ただし、こおいう処理はjavascriptオフにしている人にとっては、
まったく使い物にならなくなってしまいますよ。

- 0
- 件

通報する

この回答へのお礼

大変御礼が遅くなり申し訳ありません。
ソースを参考にさせていただき、動くようになりました。
あとは、アレンジして目的のものを作成しようと思います。
本当にありがとうございます。

>ただし、こおいう処理はjavascriptオフにしている人にとっては、
>まったく使い物にならなくなってしまいますよ。

おっしゃる通りだと思います。本来であればDBから引っ張ってくるように
実装しなければなりませんね。課題です・・・。

通報する

お礼日時：2010/11/16 17:42

No.1

回答者： yyr446
回答日時：2010/11/11 10:57

本来は、javascriptでどうこうするんじゃなく。

a.htmlがサーバー側にデータをサブミットして、サーバー側で
b.htmlにセットして出力し、ページ遷移するもんですが....
無理やりjavascriptだけでやるなら↓の方法があります。
（遷移先URLに引き渡したいデータを追記して遷移するのです。）

(a.html)
略
<body>
<form action="#">
<select name="fruit">
<option>りんご
<option>みかん
<option>すいか
</select>
<button type="button" onclick="order(this.form);">注文</button>
</form>
<script type="text/javascript">
function order(frm){
　var q = frm.elements["fruit"].options[frm.elements["fruit"].selectedIndex].text);
　location.href = "b.html" + "?" + encodeURIComponent(q);
}
</script>
</body>
</html>

(b.html）
略
<body>
<form name="hoge">
<input type="hidden" name="name" value="りんご">
<form>
<script type="text/javascript">
if('undefined' !== typeof window.addEventListener)
　 window.addEventListener('load',func,false);
　else if ('undefined' !== typeof window.attachEvent)
　 window.attachEvent('onload',func);
function func(){
　if(location.search){
　 var str = decodeURIComponent(location.search);
　 var q = str.split("?");
　 document.forms["hoge"].elements["name"].value = q[1];
　}
}
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

ご回答いただきありがとうございます。感謝申し上げます。
なるほど、どのように考えればうまくいくのかヒントが頂けました。
が・・・上記のようにやったのですが、動きません。

また大変恐縮なのですが（間違っていたら申し訳ありません）、b.htmlで
<input type="hidden" name="name" value="りんご">
と書かれているのですが、このvalue値は、前画面のa.htmlで選択された
ものをセットするので、固定でソースで記載できないと思っています。

もう少し頑張ってみます。

通報する

お礼日時：2010/11/11 12:41

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！