Check for Option selected in multiple radio buttons? [Archive]

rwaring

01-03-2004, 01:44 AM

I have a query that returns multple records.

In each record I have two radio buttons, that if one of them is checked, the form can't be submitted until the select box next to it is something other than option=0

How can I do this when each record is unique? Each record has it's own ID and that's what I attach to the NAME field so that I can tell which one it is when I process the input, but how can I prevent a user form submitting the form with radio button 2 or 3 selected, without it's appropriate select box selected too?

olerag

01-03-2004, 08:48 AM

Here's one method...

1. Give your corresponding RG/Select objects an
associated naming convention, such as:
-1RG001 and 1SL
-2RG002 and 2SL, etc.

Note: I'm placing the ending numerals on the RGs as you
said you were giving them a unique ID nbr.

2. As you iterate thru your form objects during validation,
for each RG that is analyzed, check its value and, if its in
a state where the corresponding <select> must not be
"option 0", return false if it is (option 0, that is).

To derive the corresponding <select> object, as you obtain
each RG, retrieve that RG name's first char (via the
substring(0.1) function) and use that character to derive the
corresponding <select> object to determine its selected
option.

Others may have a better/easier process.

rwaring

01-03-2004, 10:27 PM

What would be a good example of this? I'm not sure how to do this.

olerag

01-04-2004, 11:34 AM

Here's some sample code. I believe Khalid Ali provided a
link as example in a later thread of yours. This example
provides three table rows of info but the amount is irrelevant
so long as you adhere to the naming convention of the
form objects.

<html>
<head>
<script type="text/javascript">
function validate(form) {
var errArray = new Array();
var obj, temp;
var counter = 0;


for (var i=0; i<form.elements.length; i++) {
obj=form.elements[i];
if (obj.type == "radio" && obj.value == "Y" && obj.checked) {
temp = obj.name.substring(0,1);
if (getSelectListValue(form,temp) == "1") {
errArray[counter] = temp;
counter++;
}
}
}


if (errArray.length > 0) {
temp = "";
for (var i=0; i<errArray.length; i++) {
temp += "Row " + errArray[i] + "\n";
}
alert("Validation failed Errors:\n" + temp);
}
else {
alert("Validation successful - proceed with form submission.");
}
}

function getSelectListValue(form,val) {
var retVal;
for (var i=0; i<form.elements.length; i++) {
if (form.elements[i].name == val + "sl") {
retVal = form.elements[i].options[form.elements[i].options.selectedIndex].value;
break;
}
}
return(retVal);
}

</script>
</head>
<body>
<center><b>Radio Group / Selection List Sample</b></center>
<br>
For each row, if the radio group "Select" button is selected, the user must enter
an option from the associated selection list whose value is not the first option.
<p>
All errors will be displayed in an alert, otherwise the form would be considered
valid and processing may continue.
<form>
<table border="0" width="50%" align="center">
<tr>
<td align="left">Row 1</td>
<td align="left">
<input type="radio" name="1rg001" value="N" checked>No Selection<br>
<input type="radio" name="1rg001" value="Y">Select Required
</td>
<td align="center">
<select name="1sl" size="1">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</td>
</tr>

<tr>
<td align="left">Row 2</td>
<td align="left">
<input type="radio" name="2rg001" value="N" checked>No Selection<br>
<input type="radio" name="2rg001" value="Y">Select Required
</td>
<td align="center">
<select name="2sl" size="1">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</td>
</tr>

<tr>
<td align="left">Row 3</td>
<td align="left">
<input type="radio" name="3rg001" value="N" checked>No Selection<br>
<input type="radio" name="3rg001" value="Y">Select Required
</td>
<td align="center">
<select name="3sl" size="1">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</td>
</tr>

<tr>
<td align="center" colspan="3">
<input type="button" value="Execute" onClick="validate(this.form)">
</td>
</tr>
</table>
</form>
</body>
</html>