Q&A
コードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
###前提・実現したいこと
javascriptを活用した検索サイトを完成させたい。formのactionを複数有るradioで選択変更させてからtextに検索内容を入力して検索先の検索エンジン等のウェブページに送信しょうとして居ます。
###発生している問題・エラーメッセージ
javascriptでformのactionをradioで選択変更だけをすると無事に検索先に移動するのですが、textに検索内容を入力すると移動しません。
###該当のソースコード
javascript <script type="text/javascript"> function search() { var fS = document.formS; for (var i = 0; i < fS.radioB.length; i++) { if (fS.radioB[i].checked == true) { fS.action = fS.radioB[i].value; fS.submit(); } } } </script>
html <body> <form id="formS" name="formS" action="#" method="get">検索窓 <input class="textS" type="text" name="textS" value=""> <input type="hidden" name="ie" value="utf-8"> <input type="hidden" name="oe" value="utf-8"> <input type="hidden" name="hl" value="ja"> <input class="button" type="button" value="検索" onClick="return search(textS)"> <input class="button" type="reset" value="削除"> <ul class="main"> <ul 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" 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://www.yahoo.co.jp/"> <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> －－－－－－－－－－－－－－－－－(中略)－－－－－－－－－－－－－－－－－ </ul> </ul> </form> </body>
###試したこと
###補足情報(言語/FW/ツール等のバージョンなど)
html4.01、css、javascript、jquery使用。
御指導賜りまして有難う御座います。
質問サイト自体利用するのも初めてなので、入力だけで悪戦苦闘して居ります．．．
それでは宜しくお願い申し上げます。
デベロッパーツールなどでエラーを確認し、それも追記ください。
済みません。エラーが特に有りませんでした。
回答2件
0
ベストアンサー
とりあえずクエリを q で指定する系のサーチエンジンなら下記のようにすれば動くと思います。
name="textS" を name="q" に置き換え、<input type="hidden"> を全て削除。
JavaScript
1function search() { 2 var fS = document.formS; 3 fS.action = fS.radioB.value; 4 fS.submit(); 5 return false; 6} // これで十分
title=msn/search" は title="msn/search" ですね。
JavaScript の位置がわからないのでとりあえず window.search = function () { に置き換えていますが基本同じです。fS.action = fS.radioB.value; は問題なく出ますよ。下記の検索をクリックすると「https://www.google.co.jp/search?q=google&radioB=http%3A%2F%2Fwww.google.co.jp%2Fsearch&gws_rd=ssl」に遷移すると思いますよ。
HTML
1<form id="formS" name="formS" action="#" method="get">検索窓 2 <input class="textS" type="text" name="q" value="google"> 3 <input class="button" type="button" value="検索" onClick="search()"> 4 <input class="button" type="reset" value="削除"> 5 <ul class="main"> 6 <ul class="menu"> 7 <ul> 8 <ul id="search" name="se1"> 9 <li class="img1"> 10 <input type="radio" name="radioB" value="http://www.google.co.jp/search" checked="checked"> 11 <a href="http://www.google.co.jp/" alt="google/search" title="google/search"> 12 </a> 13 </li> 14 <li class="img2"> 15 <input type="radio" name="radioB" value="http://www.yahoo.co.jp/"> 16 <a href="http://www.yahoo.co.jp/" alt="yahoo!/search" title="yahoo!/search"> 17 </a> 18 </li> 19 </ul> 20 </ul> 21 </ul> 22 </ul> 23 </form>
JavaScript
1window.search = function () { 2 var fS = document.formS; 3 fS.action = fS.radioB.value; 4 console.log( fS.radioB.value ); 5 fS.submit(); 6 return false; 7}
投稿2016/05/15 15:54
編集2016/05/17 14:58総合スコア69625
御回答有難う御座います。
御教授通り修正致ましたが、｢このページは表示出来ません｣と表示されてしまいました。
for文とif文が無いとradioが複数有る為に特定出来ないのでは？と考えて居ります。
>title=msn/search" は title="msn/search" ですね。
御指摘有難う御座います。他も再度確認致します。
ところで質問なのですが、他のjavascriptとjquery果てはhtml、cssが影響される可能性は有りますか？
Googleは動きそうだったのですが、どれもだめでしたかね。とりあえずフォームを使ってGETを組み立てるより、「https://www.google.co.jp/search?q=42」みたいなURLを組んで location.href したほうがわかりやすいような。
【JavaScriptで別ページに移動させる方法】
[https://syncer.jp/javascript-reverse-reference/window-location-href](https://syncer.jp/javascript-reverse-reference/window-location-href)
見落としていましたが、
> for文とif文が無いとradioが複数有る為に特定出来ないのでは？
alert( fS.radioB.value ); とか console.log( fS.radioB.value );で確認してみてください。
> 他のjavascriptとjquery果てはhtml、cssが影響される可能性
エラーがあると動かないことは多々あります。
>alert( fS.radioB.value ); とか console.log( fS.radioB.value );で確認してみてください。
反応無しです。メッセージも何も有りませんでした。
しかし元のソースコードだとメッセージボックスが表示され｢undefined｣と表記されて居ました。
>エラーがあると動かないことは多々あります。
他は正常に動作して居ります。それでもエラー原因に成る場合も有るのでしょうか？
それからtextは無記名でbuttonを押すとアドレスは｢https://www.google.co.jp/webhp?q=&radioB=https%3A%2F%2Fwww.google.co.jp%2Fwebhp%3Fhl%3Dja%26lr%3Dlang_ja%23lr%3Dlang_ja%26hl%3Dja%26tbs%3Dlr%3Alang_1ja%26q%3D｣に成りました。
yahooの場合は｢http://www.yahoo.co.jp/?q=&radioB=http%3A%2F%2Fwww.yahoo.co.jp%2F｣です。
textに例えば｢a｣と入力すると｢https://www.google.co.jp/?q=a&radioB=http%3A%2F%2Fwww.google.co.jp%2F&gws_rd=ssl｣と成りました。
yahooは｢http://www.yahoo.co.jp/?q=a&radioB=http%3A%2F%2Fwww.yahoo.co.jp%2F｣です。
済みません。
一先ずgoogleだけは検索結果が出ました．．．
javascriptは質問時を使用、radioをvalue="http://www.google.co.jp/search"のsearchが消えて居て改めて追加すると検索出来ました．．．
済みません、お世話に成って居ります。御協力頂きまして誠に有難う御座います。
新しく提案して頂いたJavaScriptは｢このページは表示出来ません｣と成ってしまいます。
原因はfS.action = fS.radioB.value;でした．．．
for (var i = 0; i < fS.radioB.length; i++) {
if(fS.radioB[i].checked) {
fS.action = fS.radioB[i].value;
これで無いと検索結果は出ませんでした。
>JavaScript の位置がわからないのでとりあえず
他のJavaScript はjqueryでlightboxのbxsliderと横移動のページ紹介するメッセージボックス、radioの付加されたバナー項目を表示非表示するのが有ります。
これらの記載順番或いはそれ自体が影響する場合も有るのでしょうか？
書いたHTMLとJavaScriptは検証（Firefox／Chrome）して掲載しています。新規の何も書かれていないHTMLファイルを用意し、掲載したJavaScriptを<script></script>で囲んだものと、掲載したHTMLのみを書き込み、試してみてください。
そこから現在ある要素を少しずつ追加して試してみてはいかがでしょうか。
仰る通り新規で実行するも｢このページは表示出来ません｣と成ってしまいます。
どうしても
for (var i = 0; i < fS.radioB.length; i++) {
if (fS.radioB[i].checked == true) {
fS.action = fS.radioB[i].value;
これを省くと駄目みたいですね。
ところで質問したhtmlコードの中略以降はradioが複数含まれるulが後6つ程並んで居るんですが、それが原因の可能性は御座いませんか？
提示しているもの意外を記述されたのでは検証になりません。
また、下記URLは｢このページは表示出来ません｣になりますか？なるとしたら別の問題です。
https://www.google.co.jp/search?q=google&radioB=http%3A%2F%2Fwww.google.co.jp%2Fsearch&gws_rd=ssl
>提示しているもの意外を記述されたのでは検証になりません。
済みません、気を付けます。
>下記URLは｢このページは表示出来ません｣になりますか？
成りました。
>なるとしたら別の問題です。
html4.01と言ったバージョンが原因でしょうか？
或いは下部に表示される｢このWebページはスクリプトやActiveXコントロールを実行しないように制限されています。｣が原因でしょうか？｢ブロックされているコンテンツを許可｣は押して居るんですが．．．
一旦IE以外（ChromeかFirefox）を導入し、それで確認してみてください。ローカルでの挙動はIEが一番読めません。そのため基本的に開発にはChromeかFirefoxを使われることがほとんどだと思います。ちなみにさきほどのURL（ https://www.google.co.jp/search?q=google&radioB=http%3A%2F%2Fwww.google.co.jp%2Fsearch&gws_rd=ssl ）はIE11で表示されました。
引き続き御助言有難う御座います、お世話に成って居ります。
>一旦IE以外（ChromeかFirefox）を導入し、それで確認してみてください。
仰る通り確認して見た所、移動しました。
最初に提案して頂いたJavaScriptも、後に提案して頂いたJavaScriptも、無事に検索結果が表示されました。原因はIE11でした。
後はaction同様にtextnameもradioで変えられたら良いのですが．．．
ところでそちらではtext入力後にEnterKeyで移動致しましたか？
> 原因はIE11でした。
サーバに置いたら動くかもしれませんが、開発中は別のブラウザを使う必要がありそうですね。
> 後はaction同様にtextnameもradioで変えられたら良いのですが．．．
書き換えは可能だと思いますがそのあたりはご自分で調べて試してください。
> EnterKeyで移動致しましたか？
クリックイベントしか設定していないのでしません。それで移動させたければクリックイベントではなくformのsubmitイベントを取る必要があります。
【onsubmitの戻り値をfalseにしてsubmitを実行しない（中断させる）方法: 小粋空間】
http://www.koikikukan.com/archives/2012/01/18-022222.php
>サーバに置いたら動くかもしれませんが、開発中は別のブラウザを使う必要がありそうですね。
そうします。
>書き換えは可能だと思いますがそのあたりはご自分で調べて試してください。
一応参考に出来るWebをいくつか見つけたので試してみます。
>それで移動させたければクリックイベントではなくformのsubmitイベントを取る必要があります。
classとtypeをsubmitに変えると簡単にEnterKeyで移動しました。
onSubmitでも行けました。
目的である｢text内容が送信されない。｣が解決致しました。
後は検索先のtextnameを調べ、JavaScriptとradioで処理しょうと思います。
質問に御回答して頂き有難う御座いました。
0
js
1if (fS.radioB[i].checked == true && fS.textS.value == "") {
の部分の「 && fS.textS.value == ""」を削除してみてください。
また質問文のコード部分ですが
・コードブロックで囲う
・質問文に掲載されたコードのみで動作確認ができる
ようにされたほうが回答がもらいやすくなると思いますよ。
投稿2016/05/14 00:10
退会済みユーザー
総合スコア0
御助言頂きまして有難う御座います。
独力で解決出来ず、解決策を探すも見つからず、最後の手段として初めて質問させて頂いて居ります。
＞の部分の「 && fS.textS.value == ""」を削除してみてください。
実行して見ましたが、移動はするも肝心の検索内容は届かない様です。
>検索内容は届かない
というのは移動先のページで送信したテキストが検索文字列として扱われないという意味で合ってますでしょうか。
各検索サイトの検索結果ページのURLを見ると分かるのですが
例えば「テスト」で検索する場合
googleの場合は
https://www.google.co.jp/#newwindow=1&q=%E3%83%86%E3%82%B9%E3%83%88
niftyの場合は
http://search.nifty.com/websearch/search?select=2&ss=nifty_top_tp&cflg=%E6%A4%9C%E7%B4%A2&q=%E3%83%86%E3%82%B9%E3%83%88&otype=web_nifty_1
となります。
現在のコードでは各検索サイトのトップページに一律で「textS」というkeyを送信しているだけですので、各検索サイトの仕様に合わせて送信先のurl、検索文字列のkey指定、検索文字列のurlエンコード、その他必須パラメータの設定を行った上で送信する必要があります。
>>検索内容は届かない
>というのは移動先のページで送信したテキストが検索文字列として扱われないという意>味で合ってますでしょうか。
そうです。textのvalueが検索文字列として認識されて居れば、検索結果が表示される筈なのですが、現状は検索ページのトップページに移動するだけなんです。
googleならばgoogleのトップページに、niftyならばniftyのトップページに移動するだけで肝心の検索結果が表示されません。
formのactionを変えるだけで良いかと思って居ました．．．googleやyahooの検索窓設置を見て作成してみようと挑戦しましたが、そんなに大変だったとは。
あなたの回答
tips
プレビュー
