質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • JavaScript

    17024questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9287questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

javascriptが原因?text内容が送信されない。

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 899
退会済みユーザー

退会済みユーザー

前提・実現したいこと

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使用。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/05/15 00:46

    コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/05/15 01:08

    御指導賜りまして有難う御座います。 質問サイト自体利用するのも初めてなので、入力だけで悪戦苦闘して居ります... それでは宜しくお願い申し上げます。

    キャンセル

  • kei344

    2016/05/15 01:16

    デベロッパーツールなどでエラーを確認し、それも追記ください。

    キャンセル

  • 退会済みユーザー

    退会済みユーザー

    2016/05/15 23:59

    済みません。エラーが特に有りませんでした。

    キャンセル

回答 2

checkベストアンサー

+2

とりあえずクエリを q で指定する系のサーチエンジンなら下記のようにすれば動くと思います。


name="textS" を name="q" に置き換え、<input type="hidden"> を全て削除。

function search() {
    var fS = document.formS;
    fS.action = fS.radioB.value;
    fS.submit();
    return false;
} // これで十分

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」に遷移すると思いますよ。

<form id="formS" name="formS" action="#" method="get">検索窓
                <input class="textS" type="text" name="q" value="google">
                <input class="button" type="button" value="検索" onClick="search()">
                <input class="button" type="reset" value="削除">
                <ul class="main">
                    <ul class="menu">
                        <ul>
                            <ul id="search" name="se1">
                                <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>
                            </ul>
                        </ul>
                    </ul>
                </ul>
            </form>
window.search = function () {
    var fS = document.formS;
    fS.action = fS.radioB.value;
    console.log( fS.radioB.value );
    fS.submit();
    return false;
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/16 23:10

    御回答有難う御座います。
    御教授通り修正致ましたが、「このページは表示出来ません」と表示されてしまいました。
    for文とif文が無いとradioが複数有る為に特定出来ないのでは?と考えて居ります。

    >title=msn/search" は title="msn/search" ですね。
    御指摘有難う御座います。他も再度確認致します。

    ところで質問なのですが、他のjavascriptとjquery果てはhtml、cssが影響される可能性は有りますか?

    キャンセル

  • 2016/05/16 23:22

    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)

    キャンセル

  • 2016/05/17 00:37

    見落としていましたが、
    > for文とif文が無いとradioが複数有る為に特定出来ないのでは?
    alert( fS.radioB.value ); とか console.log( fS.radioB.value );で確認してみてください。

    > 他のjavascriptとjquery果てはhtml、cssが影響される可能性
    エラーがあると動かないことは多々あります。

    キャンセル

  • 2016/05/17 23:40 編集

    >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」です。

    キャンセル

  • 2016/05/18 00:35

    済みません。
    一先ずgoogleだけは検索結果が出ました...
    javascriptは質問時を使用、radioをvalue="http://www.google.co.jp/search"のsearchが消えて居て改めて追加すると検索出来ました...

    キャンセル

  • 2016/05/19 01:16 編集

    済みません、お世話に成って居ります。御協力頂きまして誠に有難う御座います。
    新しく提案して頂いた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の付加されたバナー項目を表示非表示するのが有ります。
    これらの記載順番或いはそれ自体が影響する場合も有るのでしょうか?

    キャンセル

  • 2016/05/19 01:29

    書いたHTMLとJavaScriptは検証(Firefox/Chrome)して掲載しています。新規の何も書かれていないHTMLファイルを用意し、掲載したJavaScriptを<script></script>で囲んだものと、掲載したHTMLのみを書き込み、試してみてください。

    そこから現在ある要素を少しずつ追加して試してみてはいかがでしょうか。

    キャンセル

  • 2016/05/20 03:28

    仰る通り新規で実行するも「このページは表示出来ません」と成ってしまいます。
    どうしても
    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つ程並んで居るんですが、それが原因の可能性は御座いませんか?

    キャンセル

  • 2016/05/20 03:33

    提示しているもの意外を記述されたのでは検証になりません。
    また、下記URLは「このページは表示出来ません」になりますか?なるとしたら別の問題です。
    https://www.google.co.jp/search?q=google&radioB=http%3A%2F%2Fwww.google.co.jp%2Fsearch&gws_rd=ssl

    キャンセル

  • 2016/05/21 03:32

    >提示しているもの意外を記述されたのでは検証になりません。
    済みません、気を付けます。
    >下記URLは「このページは表示出来ません」になりますか?
    成りました。
    >なるとしたら別の問題です。
    html4.01と言ったバージョンが原因でしょうか?
    或いは下部に表示される「このWebページはスクリプトやActiveXコントロールを実行しないように制限されています。」が原因でしょうか?「ブロックされているコンテンツを許可」は押して居るんですが...

    キャンセル

  • 2016/05/21 04:19

    一旦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で表示されました。

    キャンセル

  • 2016/05/21 23:43

    引き続き御助言有難う御座います、お世話に成って居ります。
    >一旦IE以外(ChromeかFirefox)を導入し、それで確認してみてください。
    仰る通り確認して見た所、移動しました。
    最初に提案して頂いたJavaScriptも、後に提案して頂いたJavaScriptも、無事に検索結果が表示されました。原因はIE11でした。
    後はaction同様にtextnameもradioで変えられたら良いのですが...
    ところでそちらではtext入力後にEnterKeyで移動致しましたか?

    キャンセル

  • 2016/05/21 23:51

    > 原因はIE11でした。
    サーバに置いたら動くかもしれませんが、開発中は別のブラウザを使う必要がありそうですね。

    > 後はaction同様にtextnameもradioで変えられたら良いのですが...
    書き換えは可能だと思いますがそのあたりはご自分で調べて試してください。

    > EnterKeyで移動致しましたか?
    クリックイベントしか設定していないのでしません。それで移動させたければクリックイベントではなくformのsubmitイベントを取る必要があります。

    【onsubmitの戻り値をfalseにしてsubmitを実行しない(中断させる)方法: 小粋空間】
    http://www.koikikukan.com/archives/2012/01/18-022222.php

    キャンセル

  • 2016/05/23 00:05

    >サーバに置いたら動くかもしれませんが、開発中は別のブラウザを使う必要がありそうですね。
    そうします。
    >書き換えは可能だと思いますがそのあたりはご自分で調べて試してください。
    一応参考に出来るWebをいくつか見つけたので試してみます。
    >それで移動させたければクリックイベントではなくformのsubmitイベントを取る必要があります。
    classとtypeをsubmitに変えると簡単にEnterKeyで移動しました。
    onSubmitでも行けました。

    目的である「text内容が送信されない。」が解決致しました。
    後は検索先のtextnameを調べ、JavaScriptとradioで処理しょうと思います。
    質問に御回答して頂き有難う御座いました。

    キャンセル

+1

if (fS.radioB[i].checked == true && fS.textS.value == "") {


の部分の「 && fS.textS.value == ""」を削除してみてください。

また質問文のコード部分ですが
・コードブロックで囲う
・質問文に掲載されたコードのみで動作確認ができる
ようにされたほうが回答がもらいやすくなると思いますよ。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/15 01:03

    御助言頂きまして有難う御座います。
    独力で解決出来ず、解決策を探すも見つからず、最後の手段として初めて質問させて頂いて居ります。

    >の部分の「 && fS.textS.value == ""」を削除してみてください。
    実行して見ましたが、移動はするも肝心の検索内容は届かない様です。

    キャンセル

  • 2016/05/15 01:18

    >検索内容は届かない
    というのは移動先のページで送信したテキストが検索文字列として扱われないという意味で合ってますでしょうか。

    各検索サイトの検索結果ページの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エンコード、その他必須パラメータの設定を行った上で送信する必要があります。

    キャンセル

  • 2016/05/15 23:59

    >>検索内容は届かない
    >というのは移動先のページで送信したテキストが検索文字列として扱われないという意>味で合ってますでしょうか。
    そうです。textのvalueが検索文字列として認識されて居れば、検索結果が表示される筈なのですが、現状は検索ページのトップページに移動するだけなんです。
    googleならばgoogleのトップページに、niftyならばniftyのトップページに移動するだけで肝心の検索結果が表示されません。
    formのactionを変えるだけで良いかと思って居ました...googleやyahooの検索窓設置を見て作成してみようと挑戦しましたが、そんなに大変だったとは。

    キャンセル

関連した質問

同じタグがついた質問を見る

  • JavaScript

    17024questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML

    9287questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。