I'm trying to validate the radio buttons in my form (all I need is to make sure a selection is made & if not inform the user),
Can anyone help me fix this problem. I've tried so many validations on radio buttons and I'm plain disgusted.
<html>
<head>
<title>Form</title>
<script type="text/javascript"> language="JavaScript">
<!-- <![CDATA[
function getRadioValue(banquet,size)
{
var theRadioButtons = document.banquet.size;
for (i=0;i<theRadioButtons.length;i++)
{
if (theRatioButtons[i].checked)
{
return theRadioButtons[i].value;
}
}
}
function calculate()
{
with(document.banquet)
{
total.value = (meals.value*hiddenField.value)
}
}
function validate()
{
if(document.banquet.wName.value <2)
{
alert("wName's name is invalid. Please select name from list.");
document.banquet.wName.focus();
return false;
}
if(!document.banquet.text02.value)
{
alert("You must enter your name to properly submit form.");
document.banquet.text02.focus();
return false;
}
if(!document.banquet.text03.value)
{
alert("Please enter a proper email address.");
document.banquet.text03.focus();
return false;
}
if(!document.banquet.text04.value)
{
alert("Please enter your telephone number.");
document.banquet.text04.focus();
return false;
}
if(!document.banquet.meals.value)
{
alert("Please enter # Attending.");
document.banquet.meals.focus();
return false;
}
}
var chosenSize = getRadioValue("banquet","size");
if (chosenSize==null)
{
alert("Please select T-shirt size");
return false;
}else{
return true;
}
}
// ] ]>-->
</script>
</head>
<body>
<p><b><font face="Arial" size="2"></p>
<a href="index.html">Home</a></b></font></li>
<form name="banquet" method="post" action="ThankYou.htm" onsubmit="return validate();">
<table width="70%" border="0" cellspacing="0" cellpadding="4">
<tr bgcolor="silver">
<td colspan="2">
<p align="center"><strong>Registration Form</strong></p>
<tr bgcolor="#6699cc">
<td>
<p align="right"><label for="wName">Name</label></p>
</td>
<td align="left">
<select name="wName" style="background:#f0f8ff">
<option value="1">Select Name</option>
<option value="2">NAME1</option>
<option value="3">NAME2</option>
<option value="4">NAME3</option>
<option value="5">NAME4</option>
</select>
</td>
</tr>
<tr>
<td>
<p align="right"><label for="submittedby">Form Completed by:</label></p>
</td>
<td align="left">
<input id="submittedby" type="text" name="text02" style="background:#f0f8ff" size="30">
</td>
</tr>
<tr>
<td>
<p align="right"><label for="email">E-mail:</label></p>
</td>
<td align="left">
<input id="email" type="text" name="text03" style="background:#f0f8ff"size="25">
</td>
</tr>
<tr>
<td>
<p align="right"><label for="phone">Telephone No.:</label></p>
</td>
<td align="left">
<input id="phone" type="text" name="text04" style="background:#f0f8ff"size="12">
</td>
</tr>
<tr bgcolor="#6699cc">
<td align="left">
<p align="right"><label for="attending">Total # Attending:</label> <br \>
</td>
<td align="left">
<input type="text" name="meals" style="background:#f0f8ff"size="5"</p>
<input type="button" name="Button" value="Calculate" onclick="calculate()"> @ $8.75 per person</>
</tr>
<tr bgcolor="#6699cc">
<td>
<p align="right"><label for="total">Please issue checks to Organization for: </label><br \>
<font size="-1">(Mail to: Name, Addr1, City, ST zip)</p>
</td>
<td align="left">
<p> $<input type="text" style="background:silver" name="total" value="Total" size="10"</p>
<br \>
<br \>
<input type="hidden" name="hiddenField" value="8.75">
</td>
</tr>
<tr>
<td>
<p align="right">Name's T-Shirt Size:</label> </p>
</td>
<td align="left">
<label for="r1"><input id="r1" type="radio" name="size" value="1"/>Small</label>
<label for="r2"><input id="r2" type="radio" name="size" value="2"/>Medium</label>
<label for="r3"><input id="r3" type="radio" name="size" value="3"/>Large</label>
</td>
</tr>
<tr bgcolor="#6699cc">
<td colspan="2">
<label for="comments">Please enter comments / suggestions for this year's banquet below:</label><br />
<textarea id="comments" name="commentstext" rows="5" cols="60" style="background:#f0f8ff"></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" style="background:navy" style="color:silver" value="Submit form"/>
<input type="reset" style="background:navy" style="color:silver" value="Reset fields"/>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
26 Apr, 2008 - 12:49 PM
| 