0

前提・実現したい事
formのactionとtextnameをradioで指定して検索する検索サイトを作成して居ます。

発生している問題・エラーメッセージ
actionとtextnameをradioのvalueをJavaScriptのsplitで分割して取得するも検索結果が出ません。

該当のソースコード
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

<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>

現在の詳細状況
検索エンジン等には、actionは勿論、textnameの指定も必要ですので、googleならば「http://www.google.co.jp/search」と「q」が無いとgoogleに移動出来ても検索結果が表示されません。ですから、radioのvalueに"http://www.google.co.jp/search,q"としました。
そして、JavaScriptのsplitで取得した情報を分割して送信したのですが、結果はTopPageに移動するだけでした。
御回答して頂ける方、いらっしゃいましたら宜しくお願いします。

1

1 件の回答 1

0

textSname 属性値ではなく class 属性値なので、fS.textS.name とは使えません。fs.querySelector('.textS').name などに変えるといいでしょう。

ブラウザ内蔵の開発ツールでデバッグする方法を覚えると問題解決の助けになります。この場合、search 関数の先頭にブレイクポイントをしかけてステップ実行すれば何が起きているかはわかるかと。

2
  • 御回答頂きまして有難う御座います。 ここに質問するのも初めてなので、混乱させる記述も有りますが宜しくお願いします。 >ブラウザ内蔵の開発ツールでデバッグする方法を覚えると問題解決... 済みません、使ってみましたが、原因が「fs.querySelector('.textS').name = radioVal[1];」 に有ると分かりましたが、対処が分かりませんでした。 >textS は name 属性値ではなく class 属性値... そこは存じて居たのですが、別サイトの別件で質問した際に教えて頂いた記述の仕方でした。 他に指定の仕方を知りませんでしたので...
    – user15736
    Commented 2016年6月3日 15:12
  • 原因が分かりましたので、御報告致します。 御指導頂いたfs.querySelector('.textS').nameのfsのsがSで無かったので、検索結果が出ませんでした。 無事問題が解決出来ましたので終了させて頂きます。 本当に有難う御座いました。
    – user15736
    Commented 2016年6月4日 14:27

この質問に回答するには、ログインする必要があります。