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

このQ&Aのポイント
  • プルダウンで選択された値を別ページで表示させたい。選択したデータを次のページで表示し、選択値を遷移先のフォームのhiddenにセットしたい。
  • プルダウンで選択したデータを別ページで表示させる方法がわからない。javascriptで試してみたがうまくいかない。
  • りんごやみかんなどの果物をプルダウンで選択し、次のページで選択された果物を表示させたい。遷移先のフォームのhiddenに選択値をセットしたい。お力添えをお願いします。
回答を見る
  • ベストアンサー

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

題名の通りなのですが、なかなかマッチする情報がなく苦戦しております。 お力を貸していただけると幸いです。 実現したいのは、簡単にいえば、 http://www.bang.co.jp/?ID=dp844 このサイトのように、プルダウンで選択したデータを次のページで 表示したいと思っています。ただし表示させるだけではなくて プルダウンで選択された値を遷移先のフォームのhiddenにセットしたいのです。 javascriptであれこれやっているのですが、3日間たってもできておりません。 例えば、a.htmlのプルダウンで、りんごと選ばれて確認と押したら、 b.htmlに遷移し、画面には、りんごと表示されて、 <input type="hidden" name="name" value="りんご"> こういう形にしたいと思っています。 <a.html> 選択してください。←プルダウン りんご みかん すいか 注文するボタン <b.html> 果物   りんご←前ページで選択された情報が表示されている 送付先  テキストボックス 確認ボタン どうかお力添えをお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

動きません。 => 一点不注意ミスしました。 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オフにしている人にとっては、 まったく使い物にならなくなってしまいますよ。

koji60ja
質問者

お礼

大変御礼が遅くなり申し訳ありません。 ソースを参考にさせていただき、動くようになりました。 あとは、アレンジして目的のものを作成しようと思います。 本当にありがとうございます。 >ただし、こおいう処理はjavascriptオフにしている人にとっては、 >まったく使い物にならなくなってしまいますよ。 おっしゃる通りだと思います。本来であればDBから引っ張ってくるように 実装しなければなりませんね。課題です・・・。

その他の回答 (1)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

本来は、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>

koji60ja
質問者

お礼

ご回答いただきありがとうございます。感謝申し上げます。 なるほど、どのように考えればうまくいくのかヒントが頂けました。 が・・・上記のようにやったのですが、動きません。 また大変恐縮なのですが(間違っていたら申し訳ありません)、b.htmlで <input type="hidden" name="name" value="りんご"> と書かれているのですが、このvalue値は、前画面のa.htmlで選択された ものをセットするので、固定でソースで記載できないと思っています。 もう少し頑張ってみます。

関連するQ&A

  • プルダウンで選択された値を計算し送信

    1~5の数字を選択するプルダウンメニュー$aformと、6~9を選択するプルダウンメニュー$bformがあり、投稿ボタンがひとつあるフォームを作りました。 $aformプルダウンで選択された値を×10にし、$bformプルダウンで選択された値に足して、投稿ボタンを押すとその値が変数に格納され、保存画面で数値が確認できるようにしたいのですが、投稿ボタンを押して一度保存をしても数値は0のままで計算されていないのですが、再度、投稿画面に戻り投稿を押すと計算がされてちゃんと結果が表示されます。ということは、計算するまでの流れは出来ていると思うのですが、なぜ一度で表示できないのかがわかりません。どういう可能性があるのか、もしくはズバリというものを教えていただけないでしょうか? <{assign var="a_suji" value=$aform*100}> <{assign var="kekka" value=$a_suji+$bform}> <input type="hidden" name="ymcount" value="<{$kekka}>" />

  • プルダウンを選択していないときは、初期値(selected)の値を、選

    プルダウンを選択していないときは、初期値(selected)の値を、選択したときは選択値を、hiddenで渡したい。 ▽プルダウン例 <form> <select> <option value="0" selected>A</option> <option value="4">B</option> <option value="6">C</option> </select> </form> ↑上で選択した値(A or B or C)値を、↓下のvalue=「"hoge"」に渡したいです。 ※選択肢は3つだけではなくて、たくさんあります。 ▽input例 <input name="category_name" value="hoge" type="hidden"> ※formとかselectにid振っても構いません。 ※javascriptでやりたいです。

  • プルダウンメニューの中の値を飛ばしたいです。

    こんばんは。 いつもお世話になっております。 Aテキストから持ってきたデータをプルダウンで 表示させ、プルダウンを選択された値でBテキストや Zテキストの中身を表示させる、という動きがしたいのです。 過去ログで探してみたのですが、ジャバスクリプトを 使えば可能っぽい、という所までしかわからず途方に くれています。 プルダウンメニュー選択後、「選択」ボタンを押した 場合でのB~Zテキストのデータ表示は出来るのですが プルダウン選択のみで、という部分が出来ずに困っています。 試しに書いたスクリプトは下記↓です。 <SELECT NAME=\"keyname\" onChange=\"navigate('keyname.cgi?param='this.selectedIndex);\"> $i=$start; foreach $line (@alllines) { ($keyname,$name) = split(/\,/,$line); <OPTION VALUE=\"$keyname\">$name</OPTION> "; $i++; } Aテキストの値を、プルダウンで表示される事はされるのですが、 VALUE=\"$keyname\"の値が、keyname.cgiへ渡って くれないのです。 どうかご指導よろしくお願い申し上げます。

    • ベストアンサー
    • Perl
  • プルダウンリスト(コンボボックス?)でひとつ選択し、その値を別のページで表示させる方法はないのでしょうか。

    お世話になっております。 ひとつわからないのですが、 たとえば、プルダウンには、”選択してください”、”東京”、”大阪”、”沖縄”と入っているとします。ここで、”大阪”を選び、別ページ”A”で値を$_postで受け取るとします。選択済みは”選択してください”です。 このページ”A”は再編集するためのページです。ページ”A”を開くと、先ほど選択した”大阪”をプルダウンメニューの初期設定(選択済み)にするにはどうしたらいいのでしょうか。 申し訳ございませんが、ご教授願います。よろしくお願いいたします。

    • ベストアンサー
    • PHP
  • プルダウンで選択した2つの値を

    例えば、プルダウンを2つ作り、2つから、晴れ、りんごと選択しいいねと表示させるプログラムを作成したいです。 この場合は、プルダウンは連動する必要がありません。 以下のプログラムを参考に作っているのですが、いかんせんうんともすんともいきません。 https://developer.mozilla.org/ja/docs/Learn/Java …。 どうしたらいいのでしょうか。能力がないものは泣き寝入りしかないのでしょうか。

  • チェックボックスの値を引き渡し、戻して結果に準じて違うページに飛ばしたい

    チェックボックスで選択された結果によってそれぞれ別ページに飛ばしたい と思っております。色々とググッてみたのですがどうしてもできません。 お力をおかしいただけないでしょうか? <実現したいこと> ●チェックボックスに選択されたパターンにより、それぞれ別ページに飛ばしたい。 各商品には、商品IDがあります。 リンゴの商品番号は、001 みかんの商品番号は、002 メロンの商品番号は、003 ももの商品番号は、004 パイナップルの商品番号は、005 ●カートに入れるを押した際に飛ばすページは、http://www.example.com/cart/1234567&shouhinID=選択された商品番号 ※複数選択された場合は、そのまま選択された商品番号が足されていく。 ●チェックをせずにカートに入れるボタンを押した場合は、選択されていません。 とアラートがページに書き出されるかポップアップが上がる。 <ホームページの画面> ※四角がチェックボックスです。 □りんご □みかん □メロン □もも □パイナップル カートに入れるボタン 例えばリンゴとメロンが選択された場合、 カートに入れるボタンの遷移先URLは、 http://www.example.com/cart/1234567&shouhinID=001003 ということを実現したいと思っています。 あれこれ試行錯誤してこんな感じかなと思ったものがありますので 検討違いかもしれませんが書いておきます。 html ↓ <form name="shouhin_seisei" id="shouhin_seisei" method="post" action=""> <INPUT TYPE="checkbox" NAME="shouhin" VALUE="1"> <INPUT TYPE="hidden" NAME="shouhinID" VALUE="001">りんご <INPUT TYPE="checkbox" NAME="shouhin" VALUE="1"> <INPUT TYPE="hidden" NAME="shouhinID" VALUE="002">みかん <INPUT TYPE="checkbox" NAME="shouhin" VALUE="1"> <INPUT TYPE="hidden" NAME="shouhinID" VALUE="003">メロン <INPUT TYPE="checkbox" NAME="shouhin" VALUE="1"> <INPUT TYPE="hidden" NAME="shouhinID" VALUE="004">もも <INPUT TYPE="checkbox" NAME="shouhin" VALUE="1"> <INPUT TYPE="hidden" NAME="shouhinID" VALUE="005">パイナップル <p><a onClick="linkToshouhin('seiseiurl'); return false;" target="_blank"> <img src="カートに入れるボタン.jpg" width="511" height="78" /></a></p> </form> javascript ↓ // 決済URLの動的リンク処理 function linkToshouhin(type) { var hidden_form; var shouhinID; var link_url; hidden_form = document.getElementById("shouhin_seisei"); if(!hidden_form) { return; } ここからそれぞれの処理をしたいのですが分かりません。 最後に以下を追加しています。 ↓ link_url = 'http://www.example.com/cart/1234567&shouhinID='shouhinID; hidden_form.action = link_url; hidden_form.submit(); } 以上になります。 htmlで<p><a onClick="linkToshouhin('seiseiurl'); return false;" target="_blank"> と書いていますが、こうするとseiseiurlは文字列で渡してしまっていることになりますよね。 めちゃくちゃなことを書いているとは思いますが、どうかお力をお貸しください。

  • プルダウンで値選択後、Hpにもうひとつプルダウンを追加する方法について

    初期表示上Aというプルダウンがあり、Aのプルダウンで、AAAを選択した場合にBというプルダウンを画面に追加表示させると言う事は可能なのでしょうか? (AのプルダウンにBを追加するのは無く、画面そのものにプルダウンを追加) 過去を探してみても見つけれませんでした。 (検索機能で絞りました><) リロードする以外に可能であれば、どのような例でも構いません。 ご教授頂ければと思います。 雑文恐れ入ります。

  • プルダウンの切り替えに関して

    プルダウンの切り替えに関して 以下のように上段、下段に分割されているHTMLで、上段のプルダウンにより 下段の内容を切り替えようと考えています。 <frameset> <frame name="A" id="A" src="99999"> <frame name="B" id="B" src="99999"> </frmae> PHP等はボタンを設けて、ボタンが押されたと同時にBへ表示させる事が可能 ですが、ボタンを押すというわずらわしさを省く為に、選ばれたと同時にBの内容を 切り替えたいと考えています。 少なくともAにあるプルダウンで選択された番号だけでもBに渡る事ができれば と考えていますが、javascriptではそのような事が可能なのでしょうか??? Bでは、Aから渡された値をもとにして、データベースへ検索しています。 伝わりにくい内容で申し訳ありませんが、教えて頂きたいと思います。 よろしくお願いします。

  • <input>の選択肢をプルダウンメニューから受け取り、hiddenで

    <input>の選択肢をプルダウンメニューから受け取り、hiddenで渡したいのですが、どうすればよいでしょうか? ▽プルダウン例 <FORM> <SELECT> <OPTION SELECTED>SELECT</OPTION> <OPTION VALUE="1">A</OPTION> <OPTION VALUE="2">B</OPTION> <OPTION VALUE="3">C</OPTION> </SELECT> </FORM> ↑上で選択した値(A or B or C)値を、↓下のvalue=「"hoge"」に渡したいです。 ※選択肢は3つだけではなくて、たくさんあります。 ▽input例 <input name="hosted_button_id" value="hoge" type="hidden"> http://okwave.jp/qa/q6016233.htmlの質問内容が知りたいことに近かったのですが、value値ではなくて、選択した内容そのものをhiddenへ渡す方法を教えてください。

  • phpのプルダウンメニューで選んだものを表示

    PHPのプルダウンメニューで選んだものについて、「送信」ボタンをクリックして移動したページに何を選んだのかを表示するプログラムを書きたいのですが、わかりません。 参考になるWEBページなどがありましたら教えてください。 例として、プルダウンメニューで ・好きな食べ物…「りんご」 ・好きな色…「青」 を選び、「送信」ボタンを押してページを移動し、次のページで 好きな食べ物「りんご」 好きな色「青」 と表示させたいです。

    • ベストアンサー
    • PHP

専門家に質問してみよう