• ベストアンサー

テキストエリアからボタンによって送り先を変えるには？

こんにちは。 ひとつのテキストエリアから、ボタンの違いによって送り先を変更することは可能なのでしょうか？ 具体的にやりたいことは、「検索デスク」と言うサイトのように、入力フォームは同一でもボタンの違いによって送り先が変わっています。 やりたいことは「検索デスク」さんと同一なのですが、ソースを拝見しても良くわかりませんでした。 大手のサーチエンジンの検索窓を羅列することはできるのですが、もう少しスマートにしたいです。(^^ゞ わたしのスキルは質問ID195803のとおり、JavaScriptを良く理解していないようです。 よろしくおねがいします。<(__)>

質問者が選んだベストアンサー

  • ベストアンサー
  • leaz024
  • ベストアンサー率75% (398/526)
回答No.2

検索に必要なフォームの内容は、検索サイトごとに異なります。 ですので、検索サイトごとにフォームを用意して、押されたボタンによって使うフォームを切り替えるとよいでしょう。 必要なフォームの内容は、検索サイトごとに用意されていますので、それを利用します。（参考URLを参照） ただし、そのままでは検索窓などが表示されてしまうので、type を hidden にして下さい。（スタイルシートの display:none を使うと、NNで動作しないようです。） 下記に、IE5.5 / NN4.7 / NN6.2 動作確認済みのソースを記載します。 ■HEAD内 <SCRIPT language="JavaScript"><!-- function search(btn) { 　　with (window.document) { 　　　　forms[btn.name][ forms[btn.name].alias.value ].value = btn.form.word.value; 　　　　forms[btn.name].submit(); 　　} } //--></SCRIPT> ■BODY内 <!-- 共通入力フォーム --> 　<FORM> 　　<INPUT type="text" name="word"> 　　<INPUT type="button" name="google" value="Google 検索" onClick="search(this)"> 　　<INPUT type="button" name="yahoo" value="Yahoo! 検索" onClick="search(this)"> 　</FORM> <!-- Google フォーム --> 　<FORM name="google" action="http://www.google.com/search" target="_blank"> 　　<INPUT type="hidden" name="alias" value="q"> 　　<INPUT type="hidden" name="q" value=""> 　　<INPUT type="hidden" name="hl" value="ja"> 　</FORM> <!-- Yahoo! フォーム --> 　<FORM name="yahoo" action="http://search.yahoo.co.jp/bin/search" target="_blank"> 　　<INPUT type="hidden" name="alias" value="p"> 　　<INPUT type="hidden" NAME="p" value=""> 　</FORM> # 各検索サイト用フォーム内にある alias という名の hidden オブジェクトは、スクリプトを簡単にするための工夫です。 # 検索サイトを追加する時は、検索ボタンの name と、サイト用 FORM の name を、同じ名前にして下さい。

参考URL：
http://www.google.co.jp/intl/ja/searchcode.html,http://howto.yahoo.co.jp/homepage/3/1.html
takahito
質問者

お礼

スクリプトを参考にして、思い通りに出来ました。 どうも、ありがとうございました。

takahito
質問者

補足

ありがとうございます(T_T) 感動のあまり涙が出そうです。（笑） サンプルをそのまま使用させていただいたところ、まさに求めていたものが再現できそうです。 コレを元に他の検索エンジンも自分で加えてみたいと思います。 この事で色々検索していたのですが見つけることが出来ず、困っておりましたのでとても助かりました。 解決しましたが、実際に作成してみますので1日ほど、質問は締め切らずにおきます。 重ねて、ありがとうございました。

その他の回答 (1)

  • Mizyu
  • ベストアンサー率41% (245/593)
回答No.1

<HTML> <HEAD> <Script Language="JavaScript"> function form_submit2() { document.submit_form.action = "test2.html"; document.submit_form.submit(); } </Script> </HEAD> <BODY> <form action = "test1.html" method = "post" name = "submit_form"> <input type = "text" name = "hoge"><br> <!-- test1 へ遷移 --> <input type = submit><br> <!-- test2 へ遷移 --> <input type = button onClick="form_submit2()"><br> </form> </BODY> </HTML> こんな感じでしょうか？ 内容としては下のボタンを押下したときにJavaScriptのform_submit2という関数を呼び出します。 その関数の中身でFormのSubmit先を変更してその後に強制的にSubmitさせます。

takahito
質問者

補足

早速の回答ありがとうございます。 送り先のサーチエンジンに入力キーワードを検索させたいのですが、Submitさせるだけで可能でしょうか？ ちょっと試してみましたが、できませんでした。 （test.htmlをhttp://www.google.com/searchに変更してみました） 私の理解が間違っているのでしょうか？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • テキストエリアの文字を切り替える

    意味が通じにくいかもしれませんが、１つのボタンを押すことでフォーム内テキストエリアの中身をどんどん切り替えていくって言うのはどうすればいいでしょうか？ ┌―――――― ｜[内容] ｜ └―――――― 　【ボタン】 例えばまず最初にボタンを押したら[内容]が[文章A]に、またボタンを押したら[文章B]、さらにボタンを押したら・・・といった具合に１回ボタンを押すごとにテキストエリアの中身をどんどん切り替えて行きたいのですが・・・。 私の力では検索などを使用してもやり方を見つけることが出来ません。どうかよろしくお願い致します。

  • ボタンのサイズや、ボタン内の文字サイズが勝手に変わる

    のですがどうすればいいですか？ http://www.geocities.jp/desk_top_search/aaaaa.html 新規で開いて更新してみればサイズが変わるのがわかると思います。 カーソルをボタンに持っていっても変化します。 javascriptは全くわからないのでわかりやすい回答をお願いします。

  • テキストリンクでsubmitするには

    簡易的な検索システムを作ってみました。 検索フォームでは、エリアごとにボタンを設置し、ボタンをクリックすることで、該当するエリアの検索結果が表示されるというものです。 今回、この検索フォームのボタンをテキストリンクで表示できないかと思い、ご質問させて頂きました。 現在は、下記のようなフォームにしています。 <form name="" method="POST" action="result.php"> <ul> <li><input type="submit" name="area" value="新宿"></li> <li><input type="submit" name="area" value="銀座"></li> <li><input type="submit" name="area" value="渋谷"></li> <li><input type="submit" name="area" value="恵比寿"></li> <li><input type="submit" name="area" value="品川"></li> </ul> </form> ※例えば、新宿のボタンをクリックすると、新宿に該当する検索結果が表示されます。 このボタンをテキストリンクにする方法としては、どういった方法がありますでしょうか？ アドバイスをいただければ幸いです。

    • ベストアンサー
    • HTML
  • Internet Explorerの検索ボタンについて

    こんにちは。ＲＥＮです。 ブラウザの検索ボタンを押すと、左側に検索用画面が表示されるとおもいますが、このときのサーチエンジンが日によって異なっています。今はＭＳＮの検索エンジンしか使用できない。チョット前まではｇｏｏやｉｎｆｏｓｅｅｋ等もあったような気がしますが？これって理由があるのでしょうか？

  • Googleカスタムエンジンの窓部分とボタン部分のカスタム方法について

    Googleカスタムエンジンの窓部分とボタン部分のカスタム方法について教えてください。 デフォルトの（http://www.google.com/cse/のページ右上にあるもの）検索エンジンの 「検索」ボタンを自作の画像で利用したい場合、http://www.google.com/cse/style/look/default.cssの /* Search button */ .cse input.gsc-search-button, input.gsc-search-button { にbackground、marginなどで設定するのでは間違ってますか？ とりあえずボタンを画像にしてみましたが、FFではちゃんと表示されるのにieだとウインドウの右borderが欠けてしまいます。 1.ボタンを画像にしたい。（「検索」テキストなしで） 2.ボタンの右にあるリセット用の×はいらないのですが、どこに表記してありますか？ 3.ウインドウも背景画像にしたいです。 ブラウザie6,7,8,FF3.6。 いろいろカスタムしているブログなども見て回ったのですが、古いタイプのカスタム検索エンジンについてしかなく、質問させていただきました。どうぞよろしくお願いします。

  • ２つの入力フォームの「入力窓」と「submitボタン」を共有させたい

    javascriptについての質問です。 ふたつの入力フォームの「入力窓」と「submitボタン」を共有させたいと 思っています。「検索対象」は、ラジオスイッチで切り替えると します。どのような、scriptが必要なのでしょうか？ まったくの初心者で、お恥ずかしいのですが、よろしくご指導 ください。 参考URL　http://www.majibaka.com/

  • ＩＥのエクスプローラバー、検索ボタンでエラーがでます

    ＩＥ6.0を使っています。 Googleのツールバーをインストールしました。 「GoogleをInternet Explorerで初期設定の検索エンジンにする」としたので、 エクスプローラバーの検索ボタンを押すと、画面の左にGoogleで検索する画面が現れます。 ここで「カスタマイズ」ボタンを押したとき、エラーになってしまうのですが、これは一体 どういうことなのでしょうか。 ＜エラーの内容＞ ************************************************* Internet Explorer　スクリプトエラー ライン：　1 文字：　　217 エラー：　`)` がありません コード：　0 ＵＲＬ：　http://ie.search.msn.com/ja/srchasst/srchcust.htm このページのスクリプトを実行し続けますか？ ************************************************* となり、ここで「いいえ」を押すと、日頃使わないような漢字の羅列で検索エンジンを 指定する（？）メニューが現れます。 そもそもこのメニューの意味も良くわからなかったのですが、このメニューの使い方や このエラーの対処の仕方を教えてください。最近リカバリに初めて挑戦した程度の初心者です。 お願いいたします。

  • 検索窓の設置について

    自身のＨＰ上に検索窓を設置していますが キーワードの入力域は一つでボタンによってサーチエンジンを変えています。 ＨＰの文字コードはEUC-JPで作成しているのですが サーチエンジンの中にEUC-JPに対応していないものがあり、入力したキーワードを認識してくれません。 構造としては htmlで<form action=******.cgi method="GET">として ******.cgiでボタンによってサーチエンジンを振り分けています。 jocde.plでのコンバートも上手くいってないようなので 他に方法があれば教えて下さい。 よろしくお願いします。

    • ベストアンサー
    • CGI
  • テキストエリアに画像ＵＲＬを貼り付ける入力支援

    簡単なCGI日記を作成してますが、この入力フォームのテキストエリアに手動で画像ＵＲＬのタグを入れるのが手間なので、 ↓ サーバーにある画像一覧が別窓（違うファイルから）で表示されていて（実際には画像表示ですが・・・） <a href="sample1.gif"><img src="sample1.gif"></a> <a href="sample2.gif"><img src="sample2.gif"></a> <a href="sample2.gif"><img src="sample2.gif"></a> ↓ 画像をクリックするとＣＧＩのテキストエリア内に自動で <a href="sample1.gif"><img src="sample1.gif"></a>とタグを挿入するjavascriptってサンプルになるようなものはないでしょうか？

  • テキストエリアに入力した改行コードを保持したい

    テキストエリアにコメントを入力して、その内容をDBに保存し、別ページで表示させる入力ページの作成で、フォーム内に ・テキストエリアを設置 ・その下に「プレビュー」ボタンを設置 ・その下にプレビューが表示されるエリアを設置 ・一番下にsubmitボタンを設置 test1.phpにて <form name ="form1" method="post" action="test2.php"> <table> <tr><td> <text area name ="comment" id ="comment"> </textarea> </td></tr> <tr><td> <a href="javascript:void(0);" onclick="preview_comment(); "> <img src="preview.jpg"> </a> </td></tr> <tr><td> <span id="preview_comment"> プレビュー </span> </td></tr> </table> <div><input type="submit" value ="submit"></div> </form> head部分に <script language="JavaScript"> <!-- function preview_comment() {var comment_details=document.getElementById("comment").value; document.getElementById("preview_comment").innerHTML=comment_details; } //--> </script> を設置しました。 テキストエリアにコメントを入力し、改行がある場合はその改行コードを保持した状態がプレビューとして表示され、確認をしてＯＫだったらSubmit、という処理を考えているのですが、改行コードがなくなってしまいます。 改行コードを維持したままプレビューエリアにコメントを表示させることはできますでしょうか？ どこを修正すればいいか教えて下さい。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する