Validating radio buttons (JavaScript)

TK Neva posted at Saturday, February 07, 2009 2:41 AM

I am currently making an online questionnaire and I need to validate whether or not all 5 of my radio button lists have a selected value. If they all have a selection, then I want to enable a submit button.

I can do it, but with my code the radio button lists must be selected in chronologicial order. I am referring to my buttons as components of a form ( i.e. df[2] is the third item in the form).

I need the submit button to be enabled when all radio button lists have a selected value, but in any order the user decides to answer each question.

I am really struggling. I appreciate all of the help in the past, present, and future.

Thanks.

Reply Reply Using Power Editor

	Rank	Winnings	Points
February	0	$0.00	0
January	0	$0.00	0

THIS IS SAME EXAMPLE AS YOU WANT TO DO

C_A P replied to TK Neva on Saturday, February 07, 2009 3:53 AM

A friend recently asked for a code sample showing JavaScript being used to 
client-side validate the radio inputs of an HTML form.  This example took about 
15 minutes to build and tweak to her specifications.  The techniques used here are 
very rudimentary, but effective nonetheless.  If you have suggestions for other 
approaches, or additional questions related to this example, be sure to email me. 
Best wishes! 





function validateRadio(obj,correct){
  var result = 0
  for(var i=0; i


Choose "3"
 1
 2
 3
 4

Choose "2"
 1
 2
 3
 4




<br>&amp;lt;script type="text/javascript"&amp;gt;<br>function validateRadio(obj,correct){<br>  var result = 0<br>  for(var i=0; i&amp;lt;obj.length; i++){<br>    if(obj[i].checked==true &amp;amp;&amp;amp; obj[i].value==correct) result = 1<br>  }<br>  if(!result &amp;amp;&amp;amp; obj.value == correct) result = 1<br>  return result<br>}<br>&amp;lt;/script&amp;gt;<br>&amp;lt;form onsubmit="  var err = ''<br>  if(!validateRadio(this.a,3)){ err+='\nFirst radio is wrong' }<br>  if(!validateRadio(this.b,2)){ err+='\nSecond radio is wrong' }<br>  if(err.length){ alert('Problem:'+err); return false; }<br>  else{ alert('Good Job -- Submitting'); return true; }" action="#"&amp;gt;<br><br><br>Choose "3"<br>&amp;lt;input name="a" value="1" onchange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio"&amp;gt; 1<br>&amp;lt;input name="a" value="2" onchange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio"&amp;gt; 2<br>&amp;lt;input name="a" value="3" onchange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio"&amp;gt; 3<br>&amp;lt;input name="a" value="4" onchange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio"&amp;gt; 4<br><br>&amp;lt;p&amp;gt;Choose "2"<br>&amp;lt;input name="b" value="1" type="radio"&amp;gt; 1<br>&amp;lt;input name="b" value="2" type="radio"&amp;gt; 2<br>&amp;lt;input name="b" value="3" type="radio"&amp;gt; 3<br>&amp;lt;input name="b" value="4" type="radio"&amp;gt; 4<br><br>&amp;lt;/p&amp;gt;&amp;lt;p&amp;gt;&amp;lt;input value="Submit" type="submit"&amp;gt;<br><br>&amp;lt;/p&amp;gt;&amp;lt;/form&amp;gt;

Reply Reply Using Power Editor

	Rank	Winnings	Points
February	0	$0.00	0
January	67	$0.00	1

POSTING SAME AGAIN WITH RIGHT FORMAT

C_A P replied to TK Neva on Saturday, February 07, 2009 3:57 AM





 



Choose "3" 1 2 3 4 

Choose
"2" 1 2
3 4






 
<script type="text/javascript">
function validateRadio(obj,correct){
  var result = 0
  for(var i=0; i<obj.length; i++){
    if(obj[i].checked==true && obj[i].value==correct) result = 1
  }
  if(!result && obj.value == correct) result = 1
  return result
}
</script>
<form onsubmit="  var err = ''
  if(!validateRadio(this.a,3)){ err+='\nFirst radio is wrong' }
  if(!validateRadio(this.b,2)){ err+='\nSecond radio is wrong' }
  if(err.length){ alert('Problem:'+err); return false; }
  else{ alert('Good Job -- Submitting'); return true; }" action="#">
 
 
Choose "3"
<input name="a" value="1" onchange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio"> 1
<input name="a" value="2" onchange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio"> 2
<input name="a" value="3" onchange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio"> 3
<input name="a" value="4" onchange="if(!validateRadio(this,3)) alert('Incorrect')" type="radio"> 4
 
<p>Choose "2"
<input name="b" value="1" type="radio"> 1
<input name="b" value="2" type="radio"> 2
<input name="b" value="3" type="radio"> 3
<input name="b" value="4" type="radio"> 4
 
</p><p><input value="Submit" type="submit">
 
</p></form>

Reply Reply Using Power Editor

	Rank	Winnings	Points
February	0	$0.00	0
January	67	$0.00	1

TRY THIS

C_A P replied to TK Neva on Saturday, February 07, 2009 4:00 AM

<HTML> 
<Head> 
<Script Language=javascript> 
function checkForm(isForm,btnID){ 
nradio = 0; 
ok = false; 
for (n=0; n<isForm.length; n++) 
{ 
 if (isForm[n].type == 'radio'){nradio++} 
} 
for (i=0; i<nradio; i++) 
{ 
 if(isForm.button[i].checked == true){ok = true} 
} 
if (ok == false){alert('Please make a selection')}; 
else {document.getElementById(btnID).disabled = true} 
} 
</Script> 
</Head> 
<body>  
<form name='demoForm'>  
Larry: <input type="radio" name="button" value="larry"><br>  
Moe: <input type="radio" name="button" value="moe"><br>  
Curly: <input type="radio" name="button" value="curly"><br>  
<input type="button" id='submit1' value="Submit" onClick="checkForm(demoForm,'submit1')">  
</form>  
</body>  
</html>

Reply Reply Using Power Editor

	Rank	Winnings	Points
February	0	$0.00	0
January	67	$0.00	1

TRY THIS LINK

C_A P replied to TK Neva on Saturday, February 07, 2009 4:00 AM

http://www.felgall.com/javatip2.htm

http://www.esqsoft.com/javascript/javascript-example-how-to-validate-radio-buttons.htm

Reply Reply Using Power Editor

	Rank	Winnings	Points
February	0	$0.00	0
January	67	$0.00	1

re: validating radio buttons

Panji Tengkorak replied to TK Neva on Saturday, February 07, 2009 7:45 PM

I am assuming you have groups of radio buttons there and you want the submit button to be enabled when each group has a radio button checked. I think all you need to do is to create a function to validate each group to check whether each group has a checked radio button or not and you need to call the function on every click of the radio buttons. Here is the HTML code to demonstrate it:

<html>
   <head>
      <script language="javascript">
          function validateRB() {
             RBGroup1 = document.forms.frmRadioNM.R1;
             RBGroup2 = document.forms.frmRadioNM.R2;
             R1Valid = false;
             R2Valid = false;
             
             for(i=0; i<RBGroup1.length; i++){
                 if(RBGroup1[i].checked==true) {
                    R1Valid = true;
                 }
             }
             
             for(i=0; i<RBGroup2.length; i++){
                 if(RBGroup2[i].checked==true) {
                    R2Valid = true;
                 }
             }
             
             if(R1Valid && R2Valid) {
                document.forms.frmRadioNM.btnSubmit.disabled=false;
             }
             else {
                document.forms.frmRadioNM.btnSubmit.disabled=true;
             }
          }
      </script>   
   </head>
   <body>
       <form name="frmRadioNM" id="frmRadioID">
           <input type="radio" value="R1V1" name="R1" onclick="validateRB();">
           <input type="radio" value="R1V2" name="R1" onclick="validateRB();">
           <input type="radio" value="R1V3" name="R1" onclick="validateRB();">
           <br>
           <input type="radio" value="R2V1" name="R2" onclick="validateRB();">
           <input type="radio" value="R2V2" name="R2" onclick="validateRB();">
           <input type="radio" value="R2V3" name="R2" onclick="validateRB();">
           <br>
           <input type="submit" name="btnSubmit" value="SUBMIT" disabled>
       </form>
   </body>
</html>
_______________

Daniel

Reply Reply Using Power Editor

	Rank	Winnings	Points
February	0	$0.00	0
January	0	$0.00	0

Didn't Find The Answer You Were Looking For?

EggHeadCafe has experts online right now that may know the answer to your question. We pay them a bonus for answering as many questions as they can. So, why not help them and yourself by becoming a member (free) and ask them your question right now?

Ask Question In Live Forum

If you have an OpenID and do not want to become a member of the EggHeadCafe forum, you can also sign on to Chat Chaos and post your question to our real time Silverlight chat application.

Ask Question In Chat Chaos