<!DOCTYPE html>
<html>
<head>
<title>Full HTML entry from</title>
<link rel="stylesheet" type="text/css" href="form.css">
</head>
<body bgcolor="lightyellow">
<h1><center>The Ice Cream Shop</center></h1>
<h3>With JavaScript field validation</h3>
<form name="form1" method="POST" action="form2.cgi">
<fieldset>
<legend>Enter Fields Below</legend>
<table>
<tr>
<td><b>Enter First Name
<td><input type="text" name="firstname" id=fname >
<tr>
<td><b>Last Name
<td><input type="text" name="lastname" id=lname>
<tr>
<td><b>Enter Address
<td><textarea name="address" id=addr></textarea>
<tr>
<td><b>Choose a Brand
<td><select name="brand" id=brd>
<option value=''>- choose from below -</option>
<option>Basking-Robbins</option>
<option>Ben & Jerry's</option>
<option>Carvel</option>
<option>Cold Stone</option>
<option>Haagen-Dazs</option>
<option>Hershey's</option>
</select>
<tr>
<td><b>Ice Cream Flavor
<td><select name="flavor" multiple id=flv>
<option>Vanilla</option>
<option>Chocolate</option>
<option>Strawberry</option>
<option>Butter Pecan</option>
<option>Rocky Road</option>
<option>French Vanilla</option>
<option>Pistachio</option>
</select>
<tr>
<td><b>Select Topping
<td>
<input type="checkbox" name="topping" value="hotFudge" /> Hot Fudge
<input type="checkbox" name="topping" value="sprinkles" /> Sprinkles
<input type="checkbox" name="topping" value="nuts" /> Nuts
<input type="checkbox" name="topping" value="whippedCream" /> Whipped Cream
<tr>
<td><b>Credit Card
<td>
<input type="radio" name="creditCard" value="MC" > Master Card
<input type="radio" name="creditCard" value="VISA" > Visa
<input type="radio" name="creditCard" value="AMEX" > American Express
<input type="radio" name="creditCard" value="DISC" > Discover
<tr>
<td colspan=2>
<input type="submit" value="Place Order" onclick="return validate()" >
<input type="reset" value="Cancel" >
</table>
</fieldset>
</form>
<script>
//****************************************************************
// A script to validate form fields
// return false --> prevents the submission to the server
//****************************************************************
function validate()
{
if (document.getElementById('fname').value.trim() == '') {
alert("Please enter first name")
return false //do not submit
}
if (document.getElementById('lname').value.trim() == '') {
alert("Please enter last name")
return false //do not submit
}
if (document.getElementById('addr').value.trim() == '') {
alert("Please enter your address")
return false //do not submit
}
if (document.getElementById('brd').value == '') {
alert("Please choose ice cream brand")
return false //do not submit
}
if (document.getElementById('flv').value == '') {
alert("Please choose ice cream flavor")
return false //do not submit
}
tp = document.getElementsByName('topping')
if (!tp[0].checked && !tp[1].checked && !tp[2].checked && !tp[3].checked) {
alert("Please select ice cream topping")
return false //do not submit
}
cc = document.getElementsByName('creditCard')
if (!cc[0].checked && !cc[1].checked && !cc[2].checked && !cc[3].checked) {
alert("Please choose credit card")
return false //do not submit
}
}
</script>
</body>
</html>