タイトル通りなのですが、ラジオボタンが未選択の状態で送信された場合エラー文を表示させたいです。
また、エラーがある場合はそのまま画面遷移をせず、エラーがなかったら画面遷移をするという流れにしたいです。
HTMLもJavaScriptも初心者で特にJavaScriptはネットで調べつつ作ったため、文法もめちゃくちゃだと思いますが宜しくお願いいたします。
ちなみに現時点ではボタンを全てちゃんと選択していようが画面遷移すらしませんでした。
どこがダメなのかすら分からないので皆様の力をお借りしたいです。
HTML
1<form name="question"> 2<p class="subtl">〜〜〜〜</p> <!-- 質問内容 --> 3<p class="radiobtn"><input type="radio" name="set1" var="01">とても良い</p><br> 4<p class="radiobtn"><input type="radio" name="set1" var="02">良い</p><br> 5<p class="radiobtn"><input type="radio" name="set1" var="03">普通</p><br> 6<p class="radiobtn"><input type="radio" name="set1" var="04">悪い</p><br> 7<p class="radiobtn"><input type="radio" name="set1" var="05">とても悪い</p><br> 8 9<p class="err-text" id="1">選択してください。</p> 10</form> 11 12<form name="question"> 13<p class="subtl">〜〜〜〜</p> <!-- 質問内容 --> 14<p class="radiobtn"><input type="radio" name="set2" var="01">とても良い</p><br> 15<p class="radiobtn"><input type="radio" name="set2" var="02">良い</p><br> 16<p class="radiobtn"><input type="radio" name="set2" var="03">普通</p><br> 17<p class="radiobtn"><input type="radio" name="set2" var="04">悪い</p><br> 18<p class="radiobtn"><input type="radio" name="set2" var="05">とても悪い</p><br> 19 20<p class="err-text" id="2">選択してください。</p> 21</form> 22 23<!-- set11まで繰り返される --> 24 25<p class="btn"><input type="image" src="./img/btn01.jpg" onclick="return funcCheck()"></p>
css
1.err-text{ 2 display: none; 3}
JavaScript
1function funcCheck(){ 2 var flag = false; //チェックされているか判定フラグ 3 var errno = []; //エラー文を表示するIDの配列 4 var c = 0; //errnoの添字・カウント 5 for(var s=1; s<=11; s++){ //set11個分繰り返す 6 for(var i=0; i<5; i++){ //set1個につきラジオボタン5個の繰り返し 7 8 if(document.question.set+s[i].checked){ //チェックがついているか判定 9 flag=true; //チェックがついていたら 10 } 11 } 12 13 if(!flag){ //チェックがついていなかった場合 14 errno[c]=s; //何問目の質問が選択されていなかったか取得する 15 c=c++; //errnoのカウントを増やす 16 } 17 } 18 19 if(c=0){ //errnoが空だったら 20 location.href = 'http://yahoo.co.jp'; //そのまま画面遷移 21 }else{ //空じゃなかったら 22 for(c; c<0; c--){ //erronoのカウント分繰り返す 23 var e = 0; //エラー文を表示させるidを入れる 24 e = errno[c]; //idを代入 25 let ele = getElementById(e); //idの内容を取得 26 const displayOriginal = ele.style.display; //該当のidのエラー文のdisplay設定を取得 27 ele.style.display='inline-block'; //エラー文をinline-blockで表示させる 28 } 29 } 30}
回答1件
あなたの回答
tips
プレビュー