Validating radio buttons

Asked By TK Neva

07-Feb-09 02:41 AM

Earn up to 0 extra points for answering this tough question.

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.

THIS IS SAME EXAMPLE AS YOU WANT TO DO

C_A P replied to TK Neva

07-Feb-09 03:53 AM

Reply

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

POSTING SAME AGAIN WITH RIGHT FORMAT

C_A P replied to TK Neva

07-Feb-09 03:57 AM

Reply

<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>

TRY THIS

C_A P replied to TK Neva

07-Feb-09 04:00 AM

Reply

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>

TRY THIS LINK

C_A P replied to TK Neva

07-Feb-09 04:00 AM

Reply

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

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

re: validating radio buttons

Panji Tengkorak replied to TK Neva

07-Feb-09 07:45 PM

Reply

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