Radio button validation

prakus · Oct 1, 2004

I had posted a similar question earlier. I couldnot get the exact feedback I needed. So I am posting this question again. I hope I will find a solution to this problem.

I have the a FORM for rearranging some records (number of records is dynamic).

The code for the Form is :
<SCRIPT LANGUAGE="JavaScript">

function checkRadios() {
var el = document.forms[0].elements;
for(var i = 0 ; i < el.length ; ++i) {
if(el.type == "radio") {
var radiogroup = el[el.name]; // get the whole set of radio buttons.
var itemchecked = false;
for(var j = 0 ; j < radiogroup.length ; ++j) {
if(radiogroup[j].checked) {
itemchecked = true;
//alert("item checked for Section "+ el.name +" is." + radiogroup[j].value);
break;
}
}

if(!itemchecked) {
//alert("Please choose a number for each Section "+ el.name +".");
alert("Please choose a number for each Section.");
if(el.focus)
el.focus();
return false;
}
}
}

var itemunique = false;
for(var m = 0 ; m < el.length ; ++m) {
var count = 0;
for(var k = 0 ; k < el.length ; ++k) {
var radiogroup1 = el[el[k].name];
if(radiogroup1[m].checked) {
count = count + 1;
document.write(radiogroup1[k].value);
//itemunique = true;
//alert("item checked for Section "+ el.name +" is." + radiogroup[j].value);
//break;
}
}
if(!count == 1) {
alert("Please choose a unique number for each Section .");
//if(el.focus)
//el.focus();
return false;
}
else { return true;}

}
return true;
}
</SCRIPT>

<Form name='RearrangeSectionForm' Method='POST' Action='includes/updateSectionOrder.asp' onsubmit='return checkRadios(this);'>

<table>

<tr> <td>Current Order</td>
<td>Section Name</td>
<td>Desired Order</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>   1      2      3   </td>
</tr>
<tr>
<td>1</td>
<td>abc</td>
<td>
<input type='radio' value='1' name='R1' ID='Radio1'>
<input type='radio' value='2' name='R1' ID='Radio2'>
<input type='radio' value='3' name='R1' ID='Radio3'>
</td>
</tr>
<tr>
<td>2</td>
<td>pqr</td>
<td>
<input type='radio' value='1' name='R2' ID='Radio4'>
<input type='radio' value='2' name='R2' ID='Radio5'>
<input type='radio' value='3' name='R2' ID='Radio6'>
</td>
</tr>
<tr>
<td>3</td>
<td>xyz</td>
<td>
<input type='radio' value='1' name='R3' ID='Radio7'>
<input type='radio' value='2' name='R3' ID='Radio8'>
<input type='radio' value='3' name='R3' ID='Radio9'>
</td>
</tr>
<tr>
<td colspan='3'><input type='submit' value='Update Section Order' name='Save'></td>
</tr>

</table>

</Form>

The first part of the javascript validation code is to check if atleast one button in every radio group is checked. This works fine.

The second part in the javascript (highlighted in red) is to make sure that only one radio button is checked in each radio group having the same order( or value). (i.e., if Radio group R1 is checked and has a value of 2, then R2 and R3 should not have any radio button checked with value =2.I am having a problem validating this . Please remember that the number of records to be rearranged is dynamic but will always have the same number of radio buttons across rows and columns.

Any help will be greatly appreciated.
Thank you.
PKS.

LFI · Oct 1, 2004

The following is a sample script that isn't for VALIDATING, but rather for making sure user can only select one of each value. Will this work for you?

Code:

<html>
<head>
<script>
var radios = new Array();
var numberOfGroups = 0;
//[b]radio buttons put into array onload[/b]
function grabRadios()
{
 var inputs = document.getElementsByTagName("INPUT");
 for(var i=0; i<inputs.length; i++)
  if(inputs[i].type == "radio")
   radios[radios.length] = inputs[i];

 for(var j=0; j<radios.length; j++)
 {
  var name = radios[j].name;
  var groupNo = parseInt(name.substring(1));
  if(groupNo > numberOfGroups)
   numberOfGroups = groupNo;
 }
}

//[b]uses the checked button and its index in its group[/b]
// [b]to ensure no other groups have the same-indexed button[/b]
// [b]checked[/b]
function checkRadios(checkedRadioObj, index)
{
 for(var i=1; i<=numberOfGroups; i++) //assuming you're using 1-based naming
 {
  var radObj = document.getElementsByName("R"+i)[index];
  if(radObj != checkedRadioObj)
   radObj.checked = false;
 }
}
</script>
</head>
<body onload='grabRadios()'>
<form name='form1'>
<input type='radio' name='R1' value='1' onclick='checkRadios(this,0);' />1
<input type='radio' name='R1' value='2' onclick='checkRadios(this,1);' />2
<input type='radio' name='R1' value='3' onclick='checkRadios(this,2);' />3
<br />
<input type='radio' name='R2' value='1' onclick='checkRadios(this,0);' />1
<input type='radio' name='R2' value='2' onclick='checkRadios(this,1);' />2
<input type='radio' name='R2' value='3' onclick='checkRadios(this,2);' />3
<br />
<input type='radio' name='R3' value='1' onclick='checkRadios(this,0);' />1
<input type='radio' name='R3' value='2' onclick='checkRadios(this,1);' />2
<input type='radio' name='R3' value='3' onclick='checkRadios(this,2);' />3
</form>
</body>
</html>

If you're bent on a validation script, try this one [Note that it requires the same onload-stuff and global variables as above (to determine 'numberOfGroups'), but doesn't require the onclick events for the radio buttons]:

Code:

function validate()
{
 var indexString = ""; //for collecting chosen indexes
 for(var i=1; i<=numberOfGroups; i++)
 {
  var radGroup = document.getElementsByName("R"+i);
  for(var j=0; j<radGroup.length; j++)
   if(radGroup[j].checked)
   {
    if(indexString.indexOf("*"+j+"*") == -1)
     indexString += "*"+j+"*";
    else
    {
     alert("You cannot check two of the same values for different radio button groups.");
     return false;
    }//end else

    break;
   }//end if
 }//end for

 return true;
}//end validate()

'hope that helps.

--Dave

prakus · Oct 1, 2004

That works great.

Thank you so much Dave. [smile]

PKS.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Radio button validation

prakus

Programmer

LFI

Programmer

prakus

Programmer

Similar threads

Part and Inventory Search

Sponsor