Q&A###前提・実現したいこと
formのactionとtextnameをradioで指定して検索する検索サイトを作成して居ます。
###発生している問題・エラーメッセージ
actionとtextnameをradioのvalueをJavaScriptのsplitで分割して取得するも検索結果が出ません。原因はtextのnameが指定出来ない様です。
###該当のソースコード
**JavaScript** <script type="text/javascript"> window.search = function () { var fS = document.formS; var radioVal = fS.radioB.value.split(","); fS.action = radioVal[0]; fS.textS.name = radioVal[1]; console.log(radioVal); return false; } </script>
**HTML** <body> <form id="formS" name="formS" action="#" method="get">検索窓 <input class="textS" type="text" name="" value=""> <input class="submit" type="submit" value="検索" onClick="search()"> <input class="button" type="reset" value="削除"> <div class="main"> <div class="menu"> <ul> <li class="se"> <a href="JavaScript:onClick=display('search');" alt="search" title="search"></a> </li> <ul id="search" name="se1" style="display:none;"> <li class="img1"> <input type="radio" name="radioB" value="http://www.google.co.jp/search,q" checked="checked"> <a href="http://www.google.co.jp/" alt="google/search" title="google/search"> </a> </li> <li class="img2"> <input type="radio" name="radioB" value="http://search.yahoo.co.jp/search,p"> <a href="http://www.yahoo.co.jp/" alt="yahoo!/search" title="yahoo!/search"> </a> </li> <li class="img3"> <input type="radio" name="radioB" value="http://www.goo.ne.jp/"> <a href="http://www.goo.ne.jp/" alt="goo/search" title="goo/search"> </a> </li> <li class="img4"> <input type="radio" name="radioB" value="http://jp.msn.com/"> <a href="http://jp.msn.com/" alt="msn/search" title="msn/search"> </a> </li> <li class="img5"> <input type="radio" name="radioB" value="http://www.bing.com/"> <a href="http://www.bing.com/" alt="bing/search" title="bing/search"> </a> </li> <li class="img6"> <input type="radio" name="radioB" value="http://www.nifty.com/"> <a href="http://www.nifty.com/" alt="nifty/search" title="nifty/search"> </a> </li> <li class="img7"> <input type="radio" name="radioB" value="http://www.infoseek.co.jp/"> <a href="http://www.infoseek.co.jp/" alt="infoseek/search" title="infoseek/search"> </a> </li> <li class="img8"> <input type="radio" name="radioB" value="http://www.biglobe.ne.jp/"> <a href="http://www.biglobe.ne.jp/" alt="biglobe/search" title="biglobe/search"> </a> </li> <li class="img9"> <input type="radio" name="radioB" value="http://www.excite.co.jp/"> <a href="http://www.excite.co.jp/" alt="excite/search" title="excite/search"> </a> </li> <li class="img10"> <input type="radio" name="radioB" value="http://www.livedoor.com/"> <a href="http://www.livedoor.com/" alt="livedoor/search" title="livedoor/search"> </a> </li> <li class="img11"> <input type="radio" name="radioB" value="http://www.fresheye.com/"> <a href="http://www.fresheye.com/" alt="fresheye/search" title="fresheye/search"> </a> </li> <li class="img12"> <input type="radio" name="radioB" value="http://www.so-net.ne.jp/"> <a href="http://www.so-net.ne.jp/" alt="so-net/search" title="so-net/search"> </a> </li> <li class="img13"> <input type="radio" name="radioB" value="http://www.ocn.ne.jp/"> <a href="http://www.ocn.ne.jp/" alt="ocn/search" title="ocn/search"> </a> </li> <li class="img14"> <input type="radio" id="r1" name="radioB" value="http://www.ceek.jp/"> <a href="http://www.ceek.jp/" alt="ceek/search" title="ceek/search"> </a> </li> </ul> </ul> ------------------------------以下同リストが6項目続く---------------------------- </div> </div> </form> </body>
###試したこと###
google chromeのデベロッパー･ツールでデバッグしてみました。
search 関数の先頭にブレイクポイントを仕掛けてステップ実行して見た所、｢fS.textS.name = radioVal[1];｣ここが原因と分かりました。
補足情報(言語/FW/ツール等のバージョンなど)
より詳細な情報
回答2件
0
まず大前提としてradioのvalueの値は1つしか設定できません。
現在htmlコードはhttp://www.google.co.jp/search,qという文字列が値として設定されている状態です。
ここから推測
おそらく参考にされたサイトではradioの値を,で結合して設定することでJavaScriptで受け取った後に分割して2つに分けるということだったのではないかと思います。
その場合は
javascript
1var radioVal = fS.radioB.value.split(",");
とすることで
radioVal[0]にhttp://www.google.co.jp/searchがradioVal[1]にqが入りますのであとはこれを使ってあげれば大丈夫かと思います。
またfS.getElementByClassName(textS).name = fS.radioB.value;の行ですがfS.getElementByClassName(textS)では<intpu name="textS">を示せていませんのでfS.textSでいいかと思います。
javascript
1var fS = document.formS; 2var radioVal = fS.radioB.value.split(","); 3fS.action = radioVal[0]; 4fS.textS.name = radioVal[1];
最終的にはこんな感じでしょうか。
また質問の内容とは関係ありませんが
html
1<ul class="main"> 2 <ul class="menu"> 3 <ul>
の部分<ul>の子要素に<ul>は設定できません(<li>のみ)ので外側のulをdivに変えるなりされたほうがよいかと思います。
投稿2016/05/26 17:38
退会済みユーザー
総合スコア0
0
ベストアンサー
JavaScript
<script type="text/javascript">
window.search = function () {
var fS = document.formS;
var radioVal = fS.radioB.value.split(",");
fS.action = radioVal[0];
fS.querySelector('.textS').name = radioVal[1];
console.log(radioVal);
return false;
}
</script>
InternetExplorer11含む場合
<script type="text/javascript">
function search() {
var fS = document.formS;
for (var i = 0; i < fS.radioB.length; i++) {
if(fS.radioB[i].checked) {
var radioVal = fS.radioB[i].value.split(",");
fS.action = radioVal[0];
fS.querySelector('.textS').name = radioVal[1];
console.log(radioVal[0],radioVal[1]);
fS.submit();
return false();
}
}
}
</script>
投稿2016/06/04 15:13
退会済みユーザー
総合スコア0
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/05/28 15:24