Radio Group Validation

[CFROG]

I'm having some trouble validating radio groups. I thought this would be simple enough but it's not turning out that way. The form is rather long so I have it broken down into sections, each in it's own div. The form shows the first 11 inputs and when you click next it hides the first div and shows the second and so on until you get to the final div that actually submits the form.

There are 11 radio groups for each section, each with 5 inputs. 1 (only one) of the 5 must be selected.

<td align="center"><input type="radio" name="radio2" id="rg2" value="1" /></td>
    <td align="center"><input type="radio" name="radio2" id="rg2" value="2" /></td>
    <td align="center"><input type="radio" name="radio2" id="rg2" value="3" /></td>
    <td align="center"><input type="radio" name="radio2" id="rg2" value="4" /></td>
    <td align="center"><input type="radio" name="radio2" id="rg2" value="5" /></td>

I'm not as well versed in Javascript as I would like to be so needless to say I've tried many different ways to validate and none of them really working. The closest I've come to getting it to work is by using this generic script I found on the net.

function checkRadio (frmName, rbGroupName) { 
 var radios = document[frmName].elements[rbGroupName]; 
 for (var i=0; i <radios.length; i++) { 
  if (radios[i].checked) { 
        $('first').hide();
	$('second').show();
  } 
 } 
 alert("You misssed one of the questions"); 
}

The problem I'm having with this is that it does what I want and displays the alert when you don't select one of the radios, but when you do select one of the radios it lets you continue to the next page but still displays the alert.

The second issue with this is that I'm passing the form and input id's into the function like so:

<input type="button" onclick="checkRadio('getScore','rg1');" value="Next" />

This is fine for radio group 1, but what do I do for #'s 2 - 11?

There must an easier way to go about this. It would be much appreciated if someone could help get me pointed in the right direction.

[parry_kulk]

Regarding first issue - The alert is always displayed as it is not within any condition. Adding some condition checking like the one given below can solve the issue,

function checkRadio (frmName, rbGroupName) { 
 var queSelected = false;
 var radios = document[frmName].elements[rbGroupName]; 
 for (var i=0; i <radios.length; i++) { 
  if (radios[i].checked) { 
        $('first').hide();
	$('second').show();
        queSelected = true;
  } 
 } 

  if(!queSelected){
      alert("You misssed one of the questions"); 
  }
}

Regarding the second issue - There can be numerous ways to solve it.
One way could be that you have five buttons with different parameters in function called on onclick event. These buttons will be kept hidden or made visible in the javascript function just as the divs with different radiogroups are handled.
Another way can be that the group number can be stored in a global javascript variable like

var groupNo = 1;

Then modify the js function like

function checkRadio (frmName, rbGroupName) { 
 var queSelected = false;
 var radios = document[frmName].elements[rbGroupName+groupNo]; 
 for (var i=0; i <radios.length; i++) { 
  if (radios[i].checked) { 
        $('first').hide();
	$('second').show();
        queSelected = true;
  } 
 } 

  if(!queSelected){
      alert("You misssed one of the questions"); 
  }
   else{
      groupNo++;
   }
}

and change the button's onclick event as

<input type="button" onclick="checkRadio('getScore','rg');" value="Next" />

Hope this was helpful

[CFROG]

Thanks for the reply, I like the third option of using a global and I'll think I'll play around with that one. I perform calculations using all the inputs before committing the results to db and if it wasn't for that I would just break it down into separate forms.

I did manage one work around for this which of course isn't any type of validation, but it gives you a visual indicator if you missed something, plus it looks nice 8-)

<td align="center" bgcolor="#FFFFCC"><input type="radio" name="radio9" id="rg9" value="1" onclick="checkFirst('rg9k','check_radios.php');" /></td>
    <td align="center" bgcolor="#FFFFCC"><input type="radio" name="radio9" id="rg9" value="2" onclick="checkFirst('rg9k','check_radios.php');" /></td>
    <td align="center" bgcolor="#FFFFCC"><input type="radio" name="radio9" id="rg9" value="3" onclick="checkFirst('rg9k','check_radios.php');" /></td>
    <td align="center" bgcolor="#FFFFCC"><input type="radio" name="radio9" id="rg9" value="4" onclick="checkFirst('rg9k','check_radios.php');" /></td>
    <td align="center" bgcolor="#FFFFCC"><input type="radio" name="radio9" id="rg9" value="5" onclick="checkFirst('rg9k','check_radios.php');" /></td>
    <td><div id="rg9k"></div></td>

Make the request

function checkFirst(id,url)
{
new Ajax.Updater(id,url,{asynchronous:true});	
}

This puts a green check mark at the end of each radio group when clicked and makes it quite surprisingly easy to tell if you skipped something. Not really ideal, but not too shabby either as far as alternatives go. ;)

[eliza81]

Hi,
I am sharing with you some ajax tips.check.

I'm having some trouble validating radio groups. I thought this would be simple enough but it's not turning out that way. The form is rather long so I have it broken down into sections, each in it's own div. The form shows the first 11 inputs and when you click next it hides the first div and shows the second and so on until you get to the final div that actually submits the form.

There are 11 radio groups for each section, each with 5 inputs. 1 (only one) of the 5 must be selected.

<td align="center"><input type="radio" name="radio2" id="rg2" value="1" /></td>
    <td align="center"><input type="radio" name="radio2" id="rg2" value="2" /></td>
    <td align="center"><input type="radio" name="radio2" id="rg2" value="3" /></td>
    <td align="center"><input type="radio" name="radio2" id="rg2" value="4" /></td>
    <td align="center"><input type="radio" name="radio2" id="rg2" value="5" /></td>

I'm not as well versed in Javascript as I would like to be so needless to say I've tried many different ways to validate and none of them really working. The closest I've come to getting it to work is by using this generic script I found on the net.

function checkRadio (frmName, rbGroupName) { 
 var radios = document[frmName].elements[rbGroupName]; 
 for (var i=0; i <radios.length; i++) { 
  if (radios[i].checked) { 
        $('first').hide();
	$('second').show();
  } 
 } 
 alert("You misssed one of the questions"); 
}

The problem I'm having with this is that it does what I want and displays the alert when you don't select one of the radios, but when you do select one of the radios it lets you continue to the next page but still displays the alert.

The second issue with this is that I'm passing the form and input id's into the function like so:

<input type="button" onclick="checkRadio('getScore','rg1');" value="Next" />

This is fine for radio group 1, but what do I do for #'s 2 - 11?

There must an easier way to go about this. It would be much appreciated if someone could help get me pointed in the right direction.