ラジオボタンを使って、検索ページと検索ワードを指定して検索したい

質問

ラジオボタンがどうしても理解できません。簡単便利な機能なのでどうしても習得したいんですけれども...

やりたいことはラジオボタンで第一の選択で検索サイト（http://search.yahoo.co.jp/searchやhttp://www.google.co.jp/searchなど）を指定して、第二の選択で検索ワード（天気や地図といったもの）を決定して検索を行いたいのです。作ってみたものが下記です。

------------------------------------
スクリプトを貼り付けたら８００文字を超えましたので割愛します。
------------------------------------

どなたか教えていただければ幸いです。チェックがついていないとアラームも出したいです。すいません、よろしくお願いします。

回答No.3

yambejp · ベストアンサー

もう少し推敲してから質問した方がよかったかも
しれませんね。
たぶん以下のようなことをやりたいのだと思いますが
こんな感じでよろしいのでしょうか？
（Resultは使いようがないのですが、なんですか？）

<script language="javascript">
function submitFunc(f){
var rv1="";
var rv2="";
for(var i=0;i<f.r1.length;i++){
rv1+=(f.r1[i].checked==true)?f.r1[i].value:"";
}
for(var i=0;i<f.r2.length;i++){
rv2+=(f.r2[i].checked==true)?f.r2[i].value:"";
}
if (rv1==""){
alert("検索サイトを選択してください")
f.r1[0].focus();
return false;
}
if (rv2==""){
alert("検索ワードを選択してください")
f.r2[0].focus();
return false;
}
var f2=document.forms[rv1];
for(var i=0;i<f2.length;i++){
if(f2[i].name=="p" || f2[i].name=="q") f2[i].value=rv2;
}
f2.submit();
}

</script>
<form mothod="get">
検索サイト<br>
<input type="radio" name="r1" value="yh">yh<br>
<input type="radio" name="r1" value="gg">gg<br>
検索ワード<br>
<input type="radio" name="r2" value="天気">天気<br>
<input type="radio" name="r2" value="地図">地図<br>
<input type="text" name="Result" size="20"><br>
<input type="button" value="送信" onClick="submitFunc(this.form)">
<input type="reset" value="リセット">
</form>
<form name="yh" action="http://search.yahoo.co.jp/search" method="get">
<input type="hidden" name="p">
<input type="hidden" name="ei" value="sjis">
</form>
<form name="gg" action="http://www.google.com/search" method="get">
<input type="hidden" name="q">
</form>

お礼

>もう少し推敲してから質問した方がよかったかも
しれませんね。

そうですよね。いやぁ～すばらしい。すばらしい。完璧です。ちなみにですね、Resultのフォームは、ここで質もする前に色々なサンプルを組み合わせていたのでそのどれかサンプルの名残です。本当はスクリプトが理解できないのでもっと質問したかったのですが、そこはもう少し時間をかけて勉強して別のスレッドを立てます。ありがとうございました。

回答No.2

kokorone

まずは、
function disp(){
document.write("<form action="+rv1+" method=get><input name="+rv2+"><input type=submit value=検索></form>");
}
あとは、質問者さまが、どうしたいのか、ソースからは、わかりかねませんので、補足をお願いします。

お礼

本当はKokoroneさんから一つひとつ教えていただけたらと思っていましたがyambejpさんからホールインワンのお答えをいただいたので、この質問を閉じなければなりません。また今度ご指導ください。ありがとうございました。

補足

大変すいません。JSの前にフォーム自体が間違っていたことに気づきました。前述ではrv2が間違ってなくとも検索ワードは指定できていませんでした。生成されるフォーム自体はこうならければなりませんでした。
---
<form action="http://www.google.com/search"><input type=hidden hidden value="天気" name="q"><input type="submit" value="go検索"></form>
または
<form action="http://search.yahoo.co.jp/search"><input type=hidden value="地図" name="p"><input type=hidden value="shift_jis" name=ei><input type="submit" value="yh検索"></form>
---
そうすると新たな問題が出まして、yahooの場合は検索アドレスと"q"と言う値,googleではアドレスと"p"という値を同時に取得しなければなりません。どうすればよいのでしょうか。//元々のスクリプトには２つの検索フォームがありますが、本来は一つ（あとでhiddenで隠すつもりですが）でいきなり検索をしたいのですがｙのボタンを押さないとrv1とrv2の値が取得できません。どうすればチェックを入れるだけで取得できるようになるのでしょうか。

余計なことを言いますと、alartを出すスクリプトでラジオボタンを押した瞬間にalartが出るのとラジオボタンを選択後にsubmitボタンを押してalartがでるスクリプトの違いもわかりません。（私のラジオボタンの理解力を言ってるだけですのでこれについてはコメントいりません）

回答No.1

kokorone

割愛されては困ります。
必要最小限まで、削ったソースを提示してください。
せっかく作ったのですから、それを生かすためにも、ここで
提示していただいて、回答者の皆様に、お聞きしてはいかがですか？
また、どこでエラーになっているのか？どこがわからないのかも、
教えていただきたいですね。

補足

そうですよね。kokoroneさんありがとうございます。スクリプト結構絞りました。
<script>
var rv1,rv2;

function radio1(r){
rv1=r.value;
}

function radio2(r){
rv2=r.value;
}

function disp(r){
document.write("<form action=",rv1," method=get><input name=",rv2,"><input type=submit value=検索></form>");
}

</script>

<form name="MyForm">
検索サイト<br>
<input type="radio" name="1" value="http://search.yahoo.co.jp/search" onClick="radio1(this)">yh<br>
<input type="radio" name="1" value="http://www.google.com/search" onClick="radio1(this)">gg<br>
検索ワード<br>
<input type="radio" name="2" value="天気" onClick="radio2(this)">天気<br>
<input type="radio" name="2" value="地図" onClick="radio2(this)">地図<br>
<input type="button" value="ｙ" onClick="disp()">
<input type="text" name="Result" size="20"><br>
<input type="reset">
</form>

<SCRIPT>
<!--
disp();
// -->
</SCRIPT>

問題は本当に多くあるのですが、特になぜfunction disp内でrv2の値が得られないのかがわかりません。また２段式になっているのも望んでるわけではありません。ｙを押した後もとのページにもどると値がリセットされているみたいで２度目にｙを押しても値がundifinedになります。問題だらけのスクリプトです。よろしくおねがいします。