<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://oshiete.goo.ne.jp/qa/6016233.htmlの質問内容が知りたいことに近かったのですが、value値ではなくて、選択した内容そのものをhiddenへ渡す方法を教えてください。
No.4ベストアンサー
- 回答日時:
まずhiddenの値についてですが、
<input id="hosted_button_id" name="hosted_button_id" value="hoge" type="hidden">
↑のように初期表示の時のvalueの部分をhogeではなく、
<input id="hosted_button_id" name="hosted_button_id" value="<?php 「プルダウンの初期値の名称セット」?>" type="hidden">
↑として予めセットするだけでよいのではないでしょうか。
> APIにはジャンルIDだけ、送ればよいと思います。
> 名称を送りたいのは、遷移先のページタイトルと、遷移先のプルダウン初期表示用で使いたいためです。
> また、ジャンルIDと名称を同時に送ることについて、hiddenで送る行為自体は問題ないと思うのですが、一旦結合してsubmitで送ると、APIにジャンルIDだけが送れなくなるので、結果として、まずいのではないかと思ってます。
遷移先というのは自分で管理されているページですよね?
でしたら名称を別途送る理由が無いと思うのですが…。
最初に回答させていただきましたが、
IDをキーとして名称を値とした配列を作っておけば、
IDさえ送れば名称を決めることができるので、
それで問題ないのではないでしょうか。
APIで名称を使用しなくてもよいのであれば、
IDのみをやりとりした方がずっとシンプルですよ。
No.3
- 回答日時:
まず、例示のスクリプトがうまく動作しなかったようですみませんでした。
自分の環境では動作したので問題ないと思っていました。
> 今、お伺いしているプルダウンは、添付画像中央部分なのですが、
添付画像が見当たらないのですがどちらでしょう?
> 一旦結合して、後で分けるやり方は、難しいかなと思っていたのですが、書いていただいたコードを見たらイケそうだったので、実際に試してみました。
> やってみて初めて気付いたのですが、自分のケースの場合、このやり方では難しいことが分かりました。
> submitした時点で、APIへパラメータを投げているので、option value=の値を加工すると、その時点で処理がうまく走らなくなってしまいます。「option value=の値」「option value=を加工した値」の両方を投げればいいのか、とも思ったのですが、それだと一つのセレクトボックスでは送れないのではないかと思い、なんとか javascriptで解決したいと思っています。
他の方も疑問に思っているようですが、どんなAPIを使用したいのでしょうか。
APIにはジャンルのIDと名称を同時に送ってやらないといけないのでしょうか。
submitした時点でAPIへパラメータを投げているとは、
htmlフォーム→自サーバ→API という遷移でなく、
htmlフォーム→API→自サーバ というような流れなのですか?
この回答への補足
>添付画像が見当たらないのですがどちらでしょう?
添付しました。
>どんなAPIを使用したいのでしょうか。
楽天APIです。
>APIにはジャンルのIDと名称を同時に送ってやらないといけないのでしょうか。
APIにはジャンルIDだけ、送ればよいと思います。
名称を送りたいのは、遷移先のページタイトルと、遷移先のプルダウン初期表示用で使いたいためです。
また、ジャンルIDと名称を同時に送ることについて、hiddenで送る行為自体は問題ないと思うのですが、一旦結合してsubmitで送ると、APIにジャンルIDだけが送れなくなるので、結果として、まずいのではないかと思ってます。
>submitした時点でAPIへパラメータを投げているとは、
>htmlフォーム→自サーバ→API という遷移でなく、
>htmlフォーム→API→自サーバ というような流れなのですか?
多分、indexフォーム→API→サーバ→searchフォーム→API→サーバ→searchフォームの流れだと思うのですが、すいません、ちょっとこの辺の流れについてはまだ、勉強中で、よく分かってないため、もしかしたら、違うかもしれません。
No.2
- 回答日時:
<FORM ACTION="">
<P>
<SELECT>
<OPTION SELECTED>SELECT</OPTION>
<OPTION VALUE="A">A</OPTION>
<OPTION VALUE="B">B</OPTION>
<OPTION VALUE="C">C</OPTION>
</SELECT>
</P>
</FORM>
or
<FORM ACTION="">
<P>
<SELECT>
<OPTION SELECTED>SELECT</OPTION>
<OPTION>A</OPTION>
<OPTION>B</OPTION>
<OPTION>C</OPTION>
</SELECT>
</P>
</FORM>
value を連番で振らなければいけないなんて規則はない。
[quote cite="http://www.whatwg.org/specs/web-apps/current-wor … "]
The value attribute provides a value for element. The value of an option element is the value of the value attribute, if there is one, or the textContent of the element, if there isn't.
[/quote]
連番にしたとしても 0 ⇒ A であることが分かっているはずだから、受け取り側で何とでもなるのでは。
No.1
- 回答日時:
■JavaScriptで解決するなら
<form>
<select onchange="document.getElementById('hosted_button_id').value=this.options[this.selectedIndex].text">
<option selected>SELECT</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</form>
<input id="hosted_button_id" name="hosted_button_id" value="hoge" type="hidden">
http://okwave.jp/qa/q6217393.html
上記に解答がありますが、
■phpで解決するなら
<select name="genre">
<option value="1:ジャンル名">…となるようにし、
$tmp = explode(":", $_GET["genre"]);
list($genreId, $genreName) = $tmp;
この回答への補足
回答ありがとうございます。そのままだと識別子エラーとなったので、下記のようにしてみました。
<form action="search.php" method="get">
<select onchange="document.getElementById('hosted_button_id').value=this.options.item(this.selectedIndex).text">
あと一つだけ解決したい点があるので、追加で質問させてください。
今、お伺いしているプルダウンは、添付画像中央部分なのですが、
自分自身にsubmitして、右側のソートだけを選択して検索させた場合(onchangeさせずに、プルダウン初期値の内容で検索する場合)、内容がhiddenに送れません。
※プルダウンの初期値は、受け取った値を表示するように設定しています
※一度選択を外してまた選択し直せば正常動作します(←これをしなくてもデフォルトの値をhiddenへ渡すにはどうすればよいでしょうか。)
http://javascriptist.net/ref/event.onchange.htmlに掲載されているイベントを試してみたのですが、うまく渡りませんでした。
何かよい方法はないでしょうか?
▽PHP
一旦結合して、後で分けるやり方は、難しいかなと思っていたのですが、書いていただいたコードを見たらイケそうだったので、実際に試してみました。
やってみて初めて気付いたのですが、自分のケースの場合、このやり方では難しいことが分かりました。
submitした時点で、APIへパラメータを投げているので、option value=の値を加工すると、その時点で処理がうまく走らなくなってしまいます。「option value=の値」「option value=を加工した値」の両方を投げればいいのか、とも思ったのですが、それだと一つのセレクトボックスでは送れないのではないかと思い、なんとかjavascriptで解決したいと思っています。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
-
都道府県穴埋めゲーム
都道府県の名前を1人1つずつ投稿してください。全ての都道府県が出たら締め切ります!
-
フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
あなたが普段思っている「これまだ誰も言ってなかったけど共感されるだろうな」というあるあるを教えてください
-
映画のエンドロール観る派?観ない派?
映画が終わった後、すぐに席を立って帰る方もちらほら見かけます。皆さんはエンドロールの最後まで観ていきますか?
-
海外旅行から帰ってきたら、まず何を食べる?
帰国して1番食べたくなるもの、食べたくなるだろうなと思うもの、皆さんはありますか?
-
天使と悪魔選手権
悪魔がこんなささやきをしていたら、天使のあなたはなんと言って止めますか?
-
select値をhiddenのvalueに渡したい
HTML・CSS
-
リクエストに応じたselectedの初期値設定方法
Java
-
フォーム上で押されたボタンによってサーブレットの処理を変えたい
Java
-
-
4
JSPで<SELECT>の中にDBから持ってきたデータを反映させたい
Java
-
5
プルダウンで選択した項目にあわせて、hiddenデータも変化させてcgiにデータを送る
JavaScript
-
6
<input>のvalue値をプルダウンメニューから受け取りたいのです
JavaScript
-
7
hiddenのvalueの値を変えたい
JavaScript
-
8
JSPやサーブレットでSystem.out.println()などでコンソールに出力できますでしょうか?
Java
-
9
日付型のフィールドに空白を入れる方法を教えてください
その他(データベース)
-
10
正しいURL指定しているにもかかわらずJSPファイルにアクセスできず「404エラー」が発生
Java
-
11
JSPでImportエラーになります
Java
-
12
requestの値が削除されません…
Java
-
13
ServletからServletへの値渡し
Java
-
14
Javascriptの値をJava(JSP)へ渡す方法
Java
-
15
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
-
16
JSPファイルで生じるエラーをどのように修正するか分かりません
Java
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
全てのselect要素をデフォルト...
-
プルダウンで選択した項目にあ...
-
リストボックス内の重複したも...
-
javascript:データを日本語で...
-
連想配列を使ってコンボボック...
-
スマホのフォームでのselect複...
-
プルダウン選択を変更すると、...
-
JavaScriptで<select>の<option...
-
ラジオボタンとプルダウンを連...
-
セレクトボックスを未選択の状...
-
2つのセレクトボックスで選ば...
-
プルダウンを選択していないと...
-
サイト内の物件を複数の検索条...
-
webページの一部のみの更新につ...
-
javascriptでセレクトボックス...
-
連動プルダウンのclonenode
-
特定<table>内の<td>の色を変える
-
return trueとreturn falseの用...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
javascriptでセレクトボックス...
-
同じ名前のセレクトがある場合...
-
全てのselect要素をデフォルト...
-
【javascript】連想配列からセ...
-
スマホのフォームでのselect複...
-
selectを変更不可にしたい
-
JavaScriptで<select>の<option...
-
複数のプルダウンを1つにまとめ...
-
プルダウンの値によって活性・...
-
VBScriptでHTMLのセレクトボッ...
-
webページの一部のみの更新につ...
-
selectのすべての値を送信する方法
-
javascript:データを日本語で...
-
プルダウンのoptionの表示・非...
-
リストボックス内の重複したも...
-
select要素のvalueを配列で取得...
-
C#(csファイル)とjavascriptと...
おすすめ情報