Thursday, September 25, 2008

Drop down onfocus and Radio button validation

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript" type="text/javascript">
function ValidateForm(form)
{
if(form.name.value=='')
{
alert('You did not enter your name')
form.name.focus();
return false;
}
if(form.email.value=='')
{
alert('You did not enter your email address')
form.email.focus();
return false;
}

dropDownMenu = document.getElementsByName('hear')
if(dropDownMenu[0].selectedIndex==0)
{
alert('You must make a choice');

form.hear.focus();
return false;
}
if(form.sub.value=='')
{
alert('You must make a choice');

form.hear.focus();
return false;
}
//RADIO BUTTON VALIDATION
var checked = false;
var buttons = form.elements.sub;
for (var i=0; i<buttons.length; i++)
{
if (buttons[i].checked) {
checked = true;
break;
}
}
if(!checked)
alert("you have to choose a one radio button");
return checked ;

return true;
}//-- end ValidateForm()
-->
</script>
</head>
<body>
<!-- begin form -->
<form action="#" method="POST" name="nerdForm" onsubmit="return ValidateForm(this)">
<table cellpadding="2" cellspacing="2" class="form" bgcolor="#FFFF33">
<tr>
<td colspan="2" class="title">Items in <span class="announce">red</span> are required items</td>
</tr>
<tr>
<td class="announce">Name</td>
<td><input type="text" size="22" maxlength="22" class="input" name="name"></td>
</tr>
<tr>
<td class="announce">Email Address</td>
<td><input type="text" size="22" maxlength="35" class="input" name="email"></td>
</tr>
<tr>
<td>Phone</td>
</td>
<td><input type="text" size="22" maxlength="22" class="input" name="phone"></td>
</tr>
<tr>
<td class="announce">How did you hear about us?</td>
<td><select name="hear" class="input">
<option value="">Please choose...</option>
<option value="friend">Friend</option>
<option value="interent">Internet</option>
<option value="ad">Advertisement</option>
</select>
</td>
</tr>
<tr>
<td class="announce">Would you like to Subscribe?</td>
<td>Yes
<input type="radio" value="yes" name="sub">
No
<input type="radio" value="no" name="sub"></td>
</tr>
<tr>
<td colspan="2" class="center"><input type="submit" value="Submit" class="button ">
  
<input type="reset" value="Clear" class="button">
</td>
</tr>
</table>
</form>
<!-- end form -->
</body>
</html>

No comments: