- ベストアンサー
チェックボックスとテキストフィールドを連動させて、Javascriptでチェックをかけたい
このようなアンケートがあるとします。 //アンケートスタート ●Q1 あなたはJavascriptを使いこなしていますか？ ラジオボタン回答1 使いこなしている ラジオボタン回答2 あまり使いこなしているといえない ラジオボタン回答3 ぜんぜん使いこなしていない ●Q2 Q1で「あまり使いこなしているといえない」 「ぜんぜん使いこなしていない」と回答した方のみお答えください。 その理由はどのようなものですか？ チェックボックス回答1 むずかしい チェックボックス回答2 わかりにくい チェックボックス回答3 そのほか テキストフィールド そのほかの理由（ ） 【送信ボタン】 //アンケートエンド ■上のアンケートでJavascriptを使用して 次のことをしたいのですが、教えてください。 1.Q1の2と3にチェックがあるのに、 Q2に未回答のままフォームデータを送信しようとした場合に、 アラートを表示させたい 2.Q2で3を選んだ人にもかかわらず、 そのほかの理由テキストフィールドに未記入のまま フォームデータを送信しようとした場合、 アラートを表示させたい よろしくお願いします。
- fishpaw
- お礼率52% (21/40)
- JavaScript
- 回答数4
- ありがとう数2
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
えーと、 まず確認を取っておきたいのですが SubmitCheck()は該当<form>タグからonSubmitで呼び出しているんでしょうか? また、regsは該当<form>の名前(name属性の値)ととっていいんでしょうか? あと、【中略】 の部分にはreturn trueは無いととっていいんでしょうか? とりあえず上記の条件ととって話を進めると No2.で僕がやったように onSubmit="SubmitCheck(this)" で呼び出して関数名をfunction SubmitCheck(thisform)にしておけば document.regsはすべてthisformに置き換える事が出来ます。 【中略】の後を scriptqueshantei = checans(thisform); return scriptqueshantei; とすれば問題ないと思います。確認はとってません。 あと複数回答の件ですがはっきりチェックボックスと書いてありましたね。見落としてました。ごめんなさい。 else{ quesumu = checradioon(thisform.ques2); if(!quesumu){ alert("Q2に答えてください。"); return false; } } if(thisform.ques2[2].checked){ if(thisform.q2else.value==""){ alert("テキスト欄に理由を書いてください。"); return false; の部分を else{ quesumu = checques2(thisform); if(!quesumu){ alert("Q2に答えてください。"); return false; } } if(thisform.q2a3.checked){ if(thisform.q2else.value==""){ alert("テキスト欄に理由を書いてください。"); return false; に書き換えてください。 そして次の関数を加えてください。 function checques2(thisform){ var checkumua1; var checkumua2; var checkumua3; checkumua1 = thisform.q2a1.checked; checkumua2 = thisform.q2a2.checked; checkumua3 = thisform.q2a3.checked; if(checkumua1 || checkumua2 || checkumua3){ return true; } else{ return false; } } 本当はchecradioonみたいに流用の利く関数にしたかったんだけど難しそうだったんで特化したものにしました。 ちなみにQ2のname属性の値はid属性のそれと同じものに変えてあります。
その他の回答 (3)
- you111111
- ベストアンサー率45% (20/44)
>チェックはしてくれるのですが、そのまま送信のダイアログボックスがでてきてしまいます…。入力画面に戻し、その回答欄にフォーカスさせたいです！ 関数自体はできている様なので、送信ボタンのonclickイベントで onclick="javascript:SubmitCheck()" とすればよいのでは？・・・ >あと、Q2は複数回答できるようにしたいのですが、 >ラジオボタンのままで大丈夫なのでしょうか？ ラジオボタンの名前を変えればできます。 <input type="radio" name="rad2_1">2-1 <input type="radio" name="rad2_2">2-2 <input type="radio" name="rad2_3">2-3
お礼
ありがとうございました。
- mousengoke
- ベストアンサー率50% (197/388)
<html> <head> <script type="text/javascript"> <!-- function checans(thisform){ var quesumu; quesumu = checradioon(thisform); if(!quesumu){ alert("Q1に答えてください。") return false; } if(thisform.ques1[0].checked){ return true; } else{ quesumu = checradioon(thisform.ques2); if(!quesumu){ alert("Q2に答えてください。"); return false; } } if(thisform.ques2[2].checked){ if(thisform.q2else.value==""){ alert("テキスト欄に理由を書いてください。"); return false; } } return true; } function checradioon(thisradio){ var countradio = thisradio.length; for(i = 0;i < countradio;i++){ if(thisradio[i].checked){ return true; } } return false; } //--> </script> </head> <body> <form onSubmit="return checans(this)" action="送信先のURL"> <p>●Q1 あなたはJavascriptを使いこなしていますか？ </p> <p> <label for="q1a1"> <input type="radio" name="ques1" id= "q1a1" value="q1a1">使いこなしている </label> <label for="q1a2"> <input type="radio" name="ques1" id= "q1a2" value="q1a2">あまり使いこなしているといえない </label> <label for="q1a3"> <input type="radio" name="ques1" id= "q1a3" value="q1a3">ぜんぜん使いこなしていない </label> </p> <p>●Q2 Q1で「あまり使いこなしているといえない」「ぜんぜん使いこなしていない」と回答した方のみお答えください。 その理由はどのようなものですか？ </p> <p> <label for="q2a1"> <input type="radio" name="ques2" id= "q2a1" value="q2a1">むずかしい </label> <label for="q2a2"> <input type="radio" name="ques2" id= "q2a2" value="q2a2">わかりにくい </label> <label for="q2a3"> <input type="radio" name="ques2" id= "q2a3" value="q2a3">そのほか </label> </p> <input type="text" name="q2else"> <input type="submit" value="送信"> </form> </body> </html> ちなみに当たり前の話ですがアンケートに答える人がjavascriptを無効にしてあったり使えない環境の場合エラーなしで投稿できてしまいます。
補足
ありがとうございます。 すでにあるfunction SubmitCheck()という送信時のチェックのためのプログラムに上のチェック機能を追加したいのですが、どのように書き直せばいいのでしょうか…。 ちなみにそのfunctionはつぎのようになっています。 function SubmitCheck() { var bchecked = 0; //これは入力中のチェックです if(allHankakuCheck()){ return false; } if(allNumericCheck()){ //これも入力中のチェックです return false; } if(ua == 0 || ua == 2){ if ( document.regs.media.selectedIndex == 0 ){ alert("どのようにしてこのページをしりましたか？"); return false; } if ( !EmptyCheck(document.regs.name.value,"あなたの名前を記入してください") ) { document.regs.name.focus(); return false; } 【中略】 return true; } あと、Q2は複数選択できるようにしたいのですが、 単純にcheckboxに変更するだけじゃだめですよね？
- you111111
- ベストアンサー率45% (20/44)
こんな感じ？ <html> <head> <script language="javascript"> <!-- function ChkVal() { var blnChk = false; if(document.all.item("rad1",1).checked || document.all.item("rad1",2).checked) { for (i=0; i<document.all.item("rad2").length; i++) { if(document.all.item("rad2",i).checked) { blnChk = true; } } if(!blnChk) { alert("Ｑ２未選択！"); } else { if(document.all.item("rad2",2).checked && !frm1.txt.value) { alert("txt1未入力！"); } } } } //--> </script> </head> <body> <form name="frm1" method="post"> Ｑ１<br> <input type="radio" name="rad1" value="1">1-1 <br> <input type="radio" name="rad1" value="2">1-2 <br> <input type="radio" name="rad1" value="3">1-3 <p> Ｑ２<br> <input type="radio" name="rad2" value="4">2-1 <br> <input type="radio" name="rad2" value="5">2-2 <br> <input type="radio" name="rad2" value="6">2-3 <br> txt1<input type="text" name="txt"> <br> <input type="button" name="btn1" value="Check!" onclick="ChkVal();"> </form> </body> </html>
補足
ありがとうございます。 チェックはしてくれるのですが、そのまま送信のダイアログボックスがでてきてしまいます…。入力画面に戻し、その回答欄にフォーカスさせたいです！ あと、Q2は複数回答できるようにしたいのですが、 ラジオボタンのままで大丈夫なのでしょうか？ すみません。ご教示ください。
お礼
ありがとうございます。 本日、所用のためデータをいじることができませんので、実際データに入れ込んでテストしてみてから、あれば、改めて質問などさせていただければと思います。すみません。