Form Validation - Radio buttons

Dev Shed Forums Sponsor:

January 24th, 2002, 12:50 PM

jbird4k

Contributing User

Join Date: Nov 2001

Location: Maryland

Posts: 74

Time spent in forums: 15 h 46 m 58 sec
Reputation Power: 12

Form Validation - Radio buttons

I am pulling my hair out trying code this one segment of my validation script.

I'm hoping someone can point me in the right direction. I tried nested if statements, if,else, and a variety of different configs.

Any help would be greatly appreciated.

Here is the logic.

1.Check for answer, [radio button checked]
2.If there was no answer indicated, popup alert requesting the user answer the question.
3. If a radio button was checked, was it "other" and if it was; was input provided?
4. if the selected answer was not other; process the form
5. if it was other and no input was provided, popup alert requesting input.
6. if it was and input was provided; process the form.

here is the code:

<script language="JavaScript">
function validate()
{
itok19=false;
for(it=0;it<classSurFrm.ITEM_19.length;it++)

{
if(classSurFrm.ITEM_19[it].checked)
if(classSurFrm.ITEM_19[it].value=="ITEM_19|Other" && classSurFrm.other_22.value !="")itok19=true;
}

if(!itok19)
{
alert('You must answer #22. Please try again');
event.returnValue=false;
}

}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="classSurFrm" ACTION='example.html' METHOD='POST'onSubmit="validate();">
<div align="center">
<table width="50%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td>
<input type="radio" name="ITEM_19" value="ITEM_19|Manager">
Manager </td>
</tr>
<tr>
<td>
<input type="radio" name="ITEM_19" value="ITEM_19|Co-Worker">
Co-worker </td>
</tr>
<tr>
<td>
<input type="radio" name="ITEM_19" value="ITEM_19|Website">
Website </td>
</tr>
<tr>
<td>
<input type="radio" name="ITEM_19" value="ITEM_19|Other">
Other (list below)</td>
</tr>
<tr>
<td valign="middle">
<input type="text" name="other_22" size="30">
</td>
</tr>
</table></div>
<input type="submit" name="Submit" value="Submit"><input type="Reset" name="Reset" value="Reset">
</form>

__________________
J. Birdsell,

February 4th, 2002, 09:49 AM

vincent9999

Junior Member

Join Date: Feb 2002

Posts: 8

Time spent in forums: < 1 sec
Reputation Power: 0

This appears to give you what you're looking for. I also threw in something to clear the other text field when the first 3 buttons are clicked (there might be a better way. I'm just putting the idea out there). Another suggestion might be to give them a special message when the explanation field for other is incomplete, because they might figure that just checking other is enough and get confused when they keep getting the error message. One more thing: You might want to do a trim type of test on the 'other' text field, so nobody can fool it by inserting a blank space, but then again, they could just bypass it by putting xx or n/a or something. Just thinking out loud and offering suggestions.

<html>
<head>
<title>Untitled</title>
</head>

<body>

<script language="JavaScript">

function ClearOtherDescription() {
classSurFrm.other_22.value="";
}

function validate()
{
itok19=false;

for(it=0;it<classSurFrm.ITEM_19.length;it++)
{
if(classSurFrm.ITEM_19[it].checked && classSurFrm.ITEM_19[it].value!="ITEM_19|Other")
{
itok19=true;
} else {
if(classSurFrm.ITEM_19[it].value=="ITEM_19|Other" &&
classSurFrm.other_22.value!="") {
itok19=true;
}
}
}

if(!itok19)
{
alert('You must answer #22. Please try again');
return false;
}

}

</script>
</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="classSurFrm" ACTION='example.html' METHOD='POST' onSubmit="return validate();">
<div align="center">
<table width="50%" border="0" cellspacing="4" cellpadding="4">
<tr>
<td>
<input type="radio" name="ITEM_19" value="ITEM_19|Manager" onClick="ClearOtherDescription()">
Manager </td>
</tr>
<tr>
<td>
<input type="radio" name="ITEM_19" value="ITEM_19|Co-Worker" onClick="ClearOtherDescription()">
Co-worker </td>
</tr>
<tr>
<td>
<input type="radio" name="ITEM_19" value="ITEM_19|Website" onClick="ClearOtherDescription()">
Website </td>
</tr>
<tr>
<td>
<input type="radio" name="ITEM_19" value="ITEM_19|Other">
Other (list below)</td>
</tr>
<tr>
<td valign="middle">
<input type="text" name="other_22" size="30">
</td>
</tr>
</table></div>
<input type="submit" name="Submit" value="Submit"><input type="Reset" name="Reset" value="Reset">
</form>

</body>
</html>

February 7th, 2002, 06:32 AM