- ベストアンサー
ラジオボタンを使った簡単なアンケート(javascript希望）
WEB上でアンケートを行い、その結果で飛び先が変わるページを作りたいと思います。 CGIではなくJavascriptで動かしたいのですが、あまり詳しくありません。原理を教えてもらってもちょっと。。なので、サンプルソースが欲しいのですがどうもみつかりません。 どなたか教えて欲しいです。お願いします！ ■作りたいものの概要 アンケートは設問は二問。それぞれYorNの二択で、ラジオボタンで選択させます。 選択後、[結果]ボタンを押すと結果に応じたページが表示されます。 また、結果のパターンはYY,YN,NY,NNの四つのみで、YNとNYは別物と考えます。 ※ラジオボタンはデフォルトでYが選択されている。 ■その例； 設問１：あなたは●●ですか？ はい いいえ 設問２：あなたは▼▼ですか？ はい いいえ [結果] --------------- それぞれの結果ごとの飛び先をA.html, B.html, C.html, D.htmlとします。
- freestyle7
- お礼率41% (24/58)
- JavaScript
- 回答数2
- ありがとう数6
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
下記のHTMLで希望の動作をします。（IE5.5、NN4.7、NN6.2 動作確認済み） <HTML> <HEAD> <TITLE>アンケート</TITLE> <SCRIPT language="JavaScript"><!-- var page = new Array(); page['YY'] = 'A.html'; page['YN'] = 'B.html'; page['NY'] = 'C.html'; page['NN'] = 'D.html'; function branch(f) { var ans = ''; for (var i = 0; i < f.q1.length; i++) { if (f.q1[i].checked) ans+=f.q1[i].value; } for (var i = 0; i < f.q2.length; i++) { if (f.q2[i].checked) ans+=f.q2[i].value; } location.href = page[ans]; return false; } //--></SCRIPT> </HEAD> <BODY> <FORM name="enquete" onSubmit="return branch(this)"> 設問１：あなたは●●ですか？<BR> <INPUT type="radio" name="q1" value="Y" checked>はい <INPUT type="radio" name="q1" value="N">いいえ<BR> 設問１：あなたは▼▼ですか？<BR> <INPUT type="radio" name="q2" value="Y" checked>はい <INPUT type="radio" name="q2" value="N">いいえ<BR> <INPUT type="submit" value="送信"> </FORM> </BODY> </HTML> ※見やすさのために全角スペースを入れています。コピーする際は、半角スペースかタブに変換して下さい。 ※No.1のお礼より > ファイルがひらかず再読込されるだけです。 これは、JavaScriptの定義関数から false を返していないために起こります。 FORMタグの「 onSubmit="return 関数" 」で呼び出す関数からは、false を返すことでFORMの送信動作をキャンセルさせることができます。（true を返せば送信します。） （No.1の回答では、恐らく「 return false; 」を書き忘れたのでしょう。） このようにしておけば、同じ画面に新しいページが表示されます。（open関数などを使う必要はありません。） また、URLをフルパスで指定しても大丈夫です。
その他の回答 (1)
- madman
- ベストアンサー率24% (612/2465)
こんな感じでしょうか？ 一応IEでは動作しますが、netscape系は動作が変です。 <HTML> <HEAD> <TITLE>さんぷる</TITLE> <SCRIPT type="text/javascript"> var q1=1; var q2=1; function hantei(){ if(q1 == 1 && q2 == 1) { location.href = "./A.html"; } else if(q1 == 1 && q2 == 2) { location.href = "./B.html"; } else if(q1 == 2 && q2 == 1) { location.href = "./C.html"; } else if(q1 == "2" && q2 == "2") { location.href = "./D.html"; } } </SCRIPT> </HEAD> <BODY> <FORM onsubmit="return hantei()"> 設問１：あなたは●●ですか？ <BR> <INPUT TYPE="radio" VALUE="1" checked onclick="q1=1;">はい</INPUT> <INPUT TYPE="radio" VALUE="2" onclick="q1=2;">いいえ</INPUT> <BR> 設問２：あなたは▼▼ですか？ <BR> <INPUT TYPE="radio" VALUE="1" checked onclick="q2=1;">はい</INPUT> <INPUT TYPE="radio" VALUE="2" onclick="q2=2;">いいえ</INPUT> <BR> <INPUT TYPE="SUBMIT" VALUE="結果"></INPUT> </FORM> </BODY> </HTML>
お礼
NAMEを入れてみたところ、選択できるようになりました！ ＞TYPE="radio" NAME="Q1" VALUE="1" checked onclick="q1=1;">はい location.href = "./C.html"; の部分ですが、PATHがあっているのに、ファイルを開けませんでした。 ファイルがひらかず再読込されるだけです。 また、最終的にはフルパスでURLを書きたいのですが、 window.open("full path URL") だとうまくいったのですが、 同じ画面内でページを開くように window.open("full path URL" , "_top"); としてみたのですが、NGでした。
補足
IE5.5SP2とNS4.75で試しましたが、 「いいえ」が選択出来ません。
![その他([技術者向] コンピューター) イメージ](https://gazo.okwave.jp/okwave/images/related_qa/c205_4_thumbnail_img_sm.png)
お礼
完璧です！！ ありがとうございました。（＆勉強になります。）