• ベストアンサー

ｊａｖａｓｃｒｉｐｔでラジオボタンを使用した検索をできるようにしたいです

現在javascriptで任意のラジオボタンを選択すると、外部データベースから簡単な検索が出来るようなものを試しに作っているのですが、ラジオボタンのvalueが認識されないため頭を抱えています。 初歩的かつ、javascriptで行うことではないと思いますが、ご教授いただければ幸いです。 下に内容を入力しますので、宜しくお願いします。 ----------------------- <html> <head> <title>DB</title> <style type="text/css"> <!-- th{background:#000080;color:#ffffff;} .light-center{background:#ffffff;text-align:center;} .light{background:#ffffff;} .dark-center{background:#dddddd;text-align:center;} .dark{background:#dddddd;} --> </style> <script language="javascript" src="./data.js"></script> <script language="javascript"> <!-- var i; var cols=3; var rows=10; var amount=cols*rows; function dataSearch(){ if(document.iform.ichar.length){ if(document.iform.ichar[0].value=="" && document.iform.ichar[1].value==""){ alert("選択してください"); document.iform.ichar.focus(); return false; } var flag=false; var resultWindow=window.open("","Result","toolbar=no,location=no,status=no,menubar=no,width=400,height=200"); resultWindow.document.write("<h3>検索結果</h3>"); resultWindow.document.write("<hr /><table border='1'>"); for(i=0;i<amount;i+=cols){ if(exDB[i]==document.iform.ichar[0].value){ resultWindow.document.write("<tr><td width=60>" + exDB[i] + "</td>"); resultWindow.document.write("<td width=120>" + exDB[i+1] + "</td>"); resultWindow.document.write("<td width=120>" + exDB[i+2] + "</td></tr>"); flag=true; }else{ if(exDB[i]==document.iform.ichar[1].value){ resultWindow.document.write("<tr><td width=60>" + exDB[i] + "</td>"); resultWindow.document.write("<td width=120>" + exDB[i+1] + "</td>"); resultWindow.document.write("<td width=120>" + exDB[i+2] + "</td></tr>"); flag=true; } } } } resultWindow.document.write("</table>"); resultWindow.document.close(); } //--> </script> </head> <body bgcolor="#fff8dc"> <h3>電球検索</h3> <hr /> 検索したい色を選択してください<br /> <form name="iform" onSubmit="dataSearch()"> <input type="radio" name="ichar" value="昼白色" />昼白色 <input type="radio" name="ichar" value="電球色" />電球色<br> <input type="submit" value="Search" /> </form> <hr /> <br /> </body> </html>

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

  • ベストアンサー
noname#84373
noname#84373
回答No.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>Counter</title> <body> <p> <input type="radio" name="ichar" value="" checked>なし <input type="radio" name="ichar" value="昼白色">昼白色 <input type="radio" name="ichar" value="電球色">電球色<br> <input type="button" value="GetValue" onClick="alert(getRadioValue('ichar'))"> </p> <script type="text/javascript"> function getRadioValue (nm) { 　var c = 0, o, g = document.getElementsByName(nm); 　while (o = g[c++]) if (o.checked) return o.value; 　return null; } </script>

deadend555
質問者

お礼

ご返答有難う御座います。 こういったやり方もあるんですね。 大変参考になりました。有難う御座いました。

その他の回答 (1)

回答No.1

exDBに値が入ってないのではないですか？ ラジオボタンが選択されているかどうかは、checkedプロパティを調べてください。 if(document.iform.ichar[0].checked == false && document.iform.ichar[1].checked == false ){

deadend555
質問者

お礼

ご返答有難う御座いました。 exDBに関しましては、外部Javascriptファイルの中で指定しております。 taloo様のヒントのおかげで無事検索できるようになりました。 本当にありがとうございました。

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

関連するQ&A

  • javascriptに関する質問です

    ９×９のます目一つ一つに・を表示させるプログラムをつくっているのですがなかなかうまくいきませんどなたかご教授ください <script language="JavaScript" type="text/javascript"> <!-- document.write("<center>"); document.write("<h1>・の表</h1>"); document.write("<table border>"); var i; var j; for (i =・;i=<9 ){ document.write("<tr>"); for(j =・;j=<9 ){ document.write("<td>"); document.write(i * j) document.write("</td>") } document.write("</tr>"); } document.write("</table>"); //--> </script>

  • ラジオボタン：新しいウインドウでジャンプ先を開く

    javascript初心者です。 答えの選択肢が４つで、それぞれ別の飛び先に飛ぶクイズを作りたいと思っております。 内容としましては、どれか１つのラジオボタンをチェックしたあとに、 「回答する」ボタンを押すと正解、不正解1、不正解2、不正解3のどれかの ページに新しいウインドウを開けて飛ばしたいです。 同一ページ内の移動はできたのですが、新しいウインドウで飛ばす方法がわかりません。 どうすれば正常に動くようになるのかアドバイスをいただけたらと思います。 ソースは以下のように書いています。 <script language="JavaScript"> <!-- function Check() { var tolink = document.url for(i=0 ; i<=tolink.list.length -1 ; i++){ if (tolink.list[i].checked) { var n = tolink.list[i].value; document.location.href=n; } } } // --> </script> <FORM name="url"> <table> <tr> <td><INPUT type="radio" name="list" value="http://www.yahoo.co.jp/">a</td> <td><INPUT type="radio" name="list" value="http://www.google.co.jp/">b</td> <td><INPUT type="radio" name="list" value="http://www.goo.ne.jp/">c</td> <td><INPUT type="radio" name="list" value="http://jp.msn.com/">d</td> <td><a href="javascript:Check()"><img src="btn_submit.gif" name="Image1" width="78" height="21" border="0"></a></td> </tr> </table> </FORM> よろしくお願いいたします。

  • ラジオボタンの初期値について

    いつも大変お世話になってます。 ラジオボタンで、ページが読み込まれたら、値によって、 選択されている状態にしようと思っているのですが、うまくいきません。 以下、ソース部分です。 ★javascript部分 addOnload(function() { var tantou9 = "<%=szei_hasu_kbn%>" var element9 = document.getElementById("hasu"); for (var i=0; i<element9.options.length;i++) { if(element9.options[i].value === tantou9){ element9.options[i].checked = true; break; }; }; }); addOnload(function() { var tantou10 = "<%=szei_zei_kbn%>" var element10 = document.getElementById("zei"); for (var i=0; i<element10.length;i++) { if(element10.item[i].value === tantou10){ element10.item[i].checked = true; break; }; }; }); 上は、プルダウンの時の処理を真似てるので、違うんだろうなとは思います。 例えば、element10[1].checked = true;　だけを実行してもダメでした。 addOnload(function()部分は、他の処理はできるので、ここは間違ってないと思います。 ちなみにサーバーサイドはASPで、<%=szei_zei_kbn%>に値が問題なく入ってることは、 確認できてます。 ★HTML部分です。 <tr> <th> <b>端数</b> </th> <td> <input id="hasu" type="radio" name="zei_hasu" style="width:100%" rows=1 value="0">四捨五入 </td> <td> <input id="hasu" type="radio" name="zei_hasu" style="width:100%" rows=1 value="1">切捨 </td> <td> <input id="hasu" type="radio" name="zei_hasu" style="width:100%" rows=1 value="2">切上 </td> </tr> <tr> <th> <b>税</b> </th> <td> <input id="zei" type="radio" name="zei_zei" style="width:100%" rows=1 value=0>外税 </td> <td> <input id="zei" type="radio" name="zei_zei" style="width:100%" rows=1 value=1>内税 </td> <td> <input id="zei" type="radio" name="zei_zei" style="width:100%" rows=1 value=2>非課税 </td> </tr> どなたかご存知の方がいらっしゃいましたら、ご教授お願いします。 宜しくお願いします。

  • javascriptでラジオボタンをチェックさせて、それによってリンク

    javascriptでラジオボタンをチェックさせて、それによってリンクを飛ばしたいと考えています。 自分なりに調べて、作成したのですが、 フレームを利用しており、ページ全体を移動（top）したいのですが、フレーム内でしか表示されません。 <HTML> <HEAD> <TITLE>らじお</TITLE> <SCRIPT LANGUAGE="JavaScript"> function jump(){ var flag = 0; for(i=0; i<document.forms[0].url.length; i++){ if(document.forms[0].url[i].checked){ flag = 1; window.location.href = document.forms[0].url[i].value; } } if(flag == 0){ alert('ラジオボタンが選択されていません。'); } } </SCRIPT> </HEAD> <BODY> <FORM> <INPUT TYPE="radio" NAME="url" VALUE="表示したいＵＲＬ.htm" checked>選択肢１<br> <INPUT TYPE="radio" NAME="url" VALUE="表示したいＵＲＬ.htm">選択肢２<br> <INPUT TYPE="radio" NAME="url" VALUE="表示したいＵＲＬ.htm">選択肢３ド<br> <INPUT TYPE="button" onClick="jump();" VALUE="移動"> </FORM> </BODY> </HTML> 上記状態で、あちらこちらに"_top"を挿入してみたのですが、うまくいきません。 どなたかお知恵を拝借出来ませんでしょうか？

  • アラートチェック＿javascript

    javascript初心者です。 15個のテキストボックスに0or1のみ入力されるようにチェックを行いたいです。 ★のところでランタイムエラーが出ます。 <SCRIPT LANGUAGE="javascript"> <!-- var isFristTime = false; function fn_submit(obj) { for(var a=1; a<16; a++){ var flag = "fl1_" + a; ★ if(obj.flag.value.match(/^[0-1\s]$/)){ alert("フラグは0か1のみです。"); break; } } } // --> </script> </head> <body> <form name="form0" action="alert_test.asp" method="POST" OnSubmit="return fn_submit(this);"> <table border="1" bordercolor="#000000" rules="none"> <tr> <% for i=1 to 15 flag = "fl1_"&i %> <td>フラグ<%= i%></td> <td width="50" align="left"> <input type="text" name=<% =flag %> style="IME-MODE: disabled" size="2" maxlength="1" value="0"></td> <tr> <% next %> </tr> </table> <input type="submit" value="チェック"> </form>

  • ラジオボタンでテーブルの背景色を変える

    いつもお世話になっています。 テーブルで数十行同じ項目を表示させるとき、今何行目を見ているかわかりやすいように 目印をつけたいと思っています。 ラジオボタンを配置したのですが、一行が横に長く、区別しにくいため 加えて選択されたラジオボタンと同じ行の背景色を変えようと思いました。 が、こういうことってできるのでしょうか？ ラジオボタン選択でウィンドウの色を変える方法の応用かなと思って 色々試しましたが全て失敗でした(涙)。 どなたかご存知の方、教えてください。 ちなみにテーブルのイメージは大体こんな感じです↓ <p align=center> <TABLE frame=below rules=all WIDTH=98% vspace=100> <tr> <td width=7% align=right><input type="radio" name="count" value="1"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right><input type="radio" name="count" value="2"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> <tr> <td width=7% align=right><input type="radio" name="count" value="3"></td> <td align=right width=8%>1234567</td> <td align=left width=18%>12345678901234567890</td> <td align=right width=8%>12</td> <td align=right width=8%>150</td> <td align=right width=8%>300</td> </tr> </table>

  • JavaScriptの入れ子

    久しぶりの、教えて gooです。 宜しくお願いします。 HTMLとJavascriptで動くホームページを、メモ帳で記述しています。 構造は、 1)HTML、BODY、FORM内のselectで、条件1と条件2を取得 　Javascriptで、入力チェックすると同時に、 　読み込むデータベース jsファイルです を動的に決めて、変数ａに格納します。 　また、条件3を、変数ｂに格納します。 2)次に、外部に置いているjsファイルを、Javascriptで読み込みます。 3)そして、Javascriptで、条件3に一致するレコードでテーブルを生成して 　innerhtmlで書き出します。 部品1)単体、部品3)単体は、動作チェックが済んでいます。 ですが、部品1)から、部品3)に、変数ａ、ｂを引き渡せていないようで 検索条件は指定出来るのに、読み込み、書き出しが実行できません。 どのように、記述を改めれば動作するのか、教えて下さい。 宜しくお願いします。 以下、ソースを抜粋します。 001 <HTML> 002 <HEAD> 003 <SCRIPT type="text/javascript"> 004 function Select(){ 005 var frm = document.forms["frm1"]; 006 007 var idx = frm.elements["select1"].selectedIndex; 008 var idy = frm.elements["select2"].selectedIndex; 009 var idz = frm.elements["select3"].selectedIndex; 010 011 　 if(idx!="" && idy!="" && idz!="") { 012 /* 読み込みDB */ 012 dbname1 = frm.elements["select1"].options[idx].value; 013 dbname2 = frm.elements["select2"].options[idy].value; 014 /* DB抽出条件 */ 015 　jouken1 = frm.elements["select3"].options[idz].value; 016 017 /* DB名称生成 */ 018 DBname = "./DB_" 019 DBname += dbname1 020 DBname += "_" 021 DBname += dbname2 022 DBname += ".js" 023 } 024 else{ 025 alert("未入力項目があります"); 026 } 027 } 028 </script> 029 030 031 <script type="text/javascript" src="DBname"></script> 032 033 034 <script type="text/javascript"> 035 var i; 036 var r; 037 var arrayLength=exDB.length; 038 039 function dataSearch(jouken1) { 040 var flag=false; 041 var msg; 042 var data=new Array(); 043 044 　　msg = "<TABLE BORDER='0'>"; 045 msg = msg+"<TR>" 046 msg = msg+"<TH width='60'>名前</TH> 047 msg = msg+"<TH width='120'>都道府県</TH> 048 msg = msg+"<TH width='120'>電話番号</TH>"; 049 msg = msg+"</TR>"; 050 051 for(i=0; i<arrayLength; i++) { 052 data=funeDB[i].split(" "); 053 if(data[0]==jouken1) { 054 flag = true; 055 msg = msg+"<TR>"; 056 msg = msg+"<TD class='light-right' width='60' >"+data[0]+"</TD>"; 057 msg = msg+"<TD class='light-right' width='120'>"+data[1]+"</TD>"; 058 msg = msg+"<TD class='light-center' width='120'>"+data[2]+"</TD>"; 059 msg = msg+"</TR>"; 060 } 061 if(flag==false) { 062 msg = msg+"<tr><td>該当する文字列はありません</td></tr>"; 063 } 064 msg = msg+"</TABLE>"; 065 document.getElementById("displayPane").innerHTML=msg; 066 } 067 </SCRIPT> 068 069 070 </HEAD> 071 072 <BODY> 073 074 <FORM name="form" action="#"> 075 <SELECT name="select1"> 076 <option value="">▼選択してください</option> 077 　　　　中略 078 </SELECT> 079 080 <SELECT name="select2"> 081 <option value="">▼選択してください</option> 082 　　　　中略 083 </SELECT> 084 085 <SELECT name="jouken1"> 086 <option value="">▼選択してください</option> 087 　　　　中略 088 </SELECT> 089 090 <INPUT type="button" value="検索する" onclick="Select()" /> 091 092 </FORM> 093 094 <DIV id="displayPane"></DIV> 095 096 </BODY> 097 098 </HTML>

  • NetScape7でJavaScriptの関数を呼んでくれない

    お世話になります、 JavaScriptで以下のような感じで画面を作成し、 リンクをクリックするとexecJumpUrl()を呼び出し submit()をおこすという処理を行っているのですが、 Netscape7で動かした場合だけ、execJumpUrl()が呼ばれないという現象が起こっております。他のブラウザ(Netscape5や6、IE5.5等)は正常にexecJumpUrl()がよばれております、これはどのようなことが原因でおこっているのでしょうか？ ご存知の方宜しくお願いします。 ソースここから----------------------- <script language="JavaScript"> function execJumpUrl(param){ document.Form.param.value = unescape(param); document.Form.action="http://xxxxxx/xxx.html"; document.Form.submit(); } </script> <html> <body> <form name="Form" method="get"> <table width="770"> <tr align="center"> <script language="JavaScript"> var param = escape("TEST"); document.write("<td width=\"30\" height=\"30\"><a href=\"javascript:execJumpUrl('" + param + "')\"><font class=\"jfont10\" size=\"2\" color=\"#FFFFFF\">" + param + "</font></a></td>"); </script> </tr> </table> </form> </body> </html>

  • ラジオボタンでジャンプ先を変更

    はじめまして。javascript初心者です。 答えの選択肢が3つあるクイズのページを制作したいと思っています。 どれか１つのラジオボタンをチェックした後、「クイズに答える」ボタンをクリックすると 正解または不正解のページにジャンプする、という形にしたいのですが 制作したものがMacのIE5できちんと動作してくれません。 winのIEなどでは大丈夫でした。わからず、とても困っています。 どうすれば正常に動くようになるのかアドバイスをいただけたらと思います。 javascript、htmlはそれぞれ下記のように書いています。 ■javascript function Check() { var tolink = document.url for(i=0 ; i<=tolink.list.length -1 ; i++){ if (tolink.list[i].checked) { var n = tolink.list[i].value; document.location.href=n; } } } ■html <FORM name="url"> <table> <tr> <td><INPUT type="radio" name="list" value="correct.html">a</td> <td><INPUT type="radio" name="list" value="mistake.html">b</td> <td><INPUT type="radio" name="list" value="mistake.html">c</td> <td><a href="#" onClick="Check()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','quiz_over.gif',1)"><img src="quiz.gif" alt="クイズに答えるボタン" name="Image1" width="200" height="30 border="0"></a></td> </tr> </table> </FORM> よろしくお願いいたします。

  • javascriptが得意な方ご教授ください。for文関連です。

    以下のソースにて？の部分を配列番号と同等にしたいのですが、うまくいきません。 やりたいことは配列のEbox_Div[0]～[3]の中にnullが入った場合その配列番号に対応するテキストボックスのEmail0～3には"空"と代入したいのです。 ※hiddenタグのEmail_hの値はTBLの状態によって異なります。 <script language="javascript"> function bunkatsu(){ var Ebox_Div = new Array(); Ebox_Div = document.myform.Email_h.value.split(","); document.myform.Email0.value = Ebox_Div[0]; document.myform.Email1.value = Ebox_Div[1]; document.myform.Email2.value = Ebox_Div[2]; document.myform.Email3.value = Ebox_Div[3]; for (i=0; i<4; i++){ if(Ebox_Div[i] == null){ document.myform.Email？.value = "空"; } } } </script> <body bgcolor="white" onLoad="bunkatsu()"> <form name="myform"> <input type="hidden" name="Email_h" value="aho,baka"> <table border="0" width="100%"> <tr><td width="10%">アドレス1</td><td width="90%"><input type="text" name="Email0" size="60"></td></tr> <tr><td width="10%">アドレス2</td><td width="90%"><input type="text" name="Email1" size="60"></td></tr> <tr><td width="10%">アドレス3</td><td width="90%"><input type="text" name="Email2" size="60"></td></tr> <tr><td width="10%">アドレス4</td><td width="90%"><input type="text" name="Email3" size="60"></td></tr> </table> よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する