<!DOCTYPE html>
<html>
<head>
<title>Full HTML entry from</title>
<style>
input,textarea,select {background-color:lightgray; font-family:helvetica; border-radius:8px}
</style>
</head>
<body bgcolor="lightyellow">
<h1><center>The Ice Cream Shop</center></h1>
<h3>JavaScript validation <i>(all errors together)</i>
<br>Write HTML form data to Database</h3>
<form method="POST" action="collect.php" onsubmit="return validate()">
<fieldset style='width:580px; height:330px; border-color:gold'>
<legend>Enter Fields Below</legend>
<table bgcolor=tan width=570px>
<tr>
<td><b>Enter First Name
<td><input type="text" name="firstname" id="fname" required>
<tr>
<td><b>Last Name
<td><input type="text" name="lastname" id="lname">
<tr>
<td><b>Enter Address
<td><textarea name="address" id="addr" rows="5" cols="50"></textarea>
<tr>
<td><b>Cone Type
<td><select name="cone" id="cone" style="width:175px">
<option value=''> Choose from below</option>
<option value='cake'> Cake Cone </option>
<option value='sugar'> Sugar Cone </option>
<option value='waffle'>Waffle Cone </option>
<option value='choc'> Chocolate Dipped </option>
</select>
<tr>
<td><b>Ice Cream Flavor
<td><select name="flavor[]" id="flavors" SIZE="4" multiple style="width:175px">
<option value='vanilla'> Vanilla </option>
<option value='chocolate'> Chocolate </option>
<option value='strawberry'> Strawberry </option>
<option value='butter-pecan'> Butter Pecan </option>
<option value='rocky-road'> Rocky Road </option>
<option value='french-vanilla'>French Vanilla </option>
<option value='pistachio'> Pistachio </option>
</select>
<tr>
<td><b>Select Topping
<td>
<input type="checkbox" name="topping[]" id="top1" value="hotFudge"> Hot Fudge
<input type="checkbox" name="topping[]" id="top2" value="sprinkles"> Sprinkles
<input type="checkbox" name="topping[]" id="top3" value="nuts"> Nuts
<input type="checkbox" name="topping[]" id="top4" value="whippedCream"> Whipped Cream
<tr>
<td><b>Credit Card
<td>
<input type="radio" name="creditCard" id="visa" value="visa"> Visa
<input type="radio" name="creditCard" id="mc" value="master-card"> Master Card
<input type="radio" name="creditCard" id="amex" value="amex"> American Express
<tr>
<td colspan=2>
<input type="submit" value=" Place Order " >
<input type="reset" value="Cancel">
</table>
</fieldset>
</form>
<hr>
Click <a href=getFromDB.php>here</a> to see all orders
<script>
<!-- JavaScript code to validate the form entry fields ----------------------------->
function validate() {
var errorMsg = "";
if (document.getElementById('fname').value == '' ||
document.getElementById('lname').value == '' ) //--- validate both first and last name
errorMsg += ' First or Last name is missing !!! \n' ;
// if (document.getElementById('addr').value == '') //--- validate entry of address
// errorMsg += ' Address is missing !!! \n' ;
var address = document.getElementById('addr').value;
if (address.match(/^\s*$/) ) //--- better validation (including all spaces)
errorMsg += ' Address is missing !!! \n' ;
if (document.getElementById('cone').value == '') //--- validate cone type (single select)
errorMsg += ' Choose a cone type !!! \n' ;
enteredFavors = ''; //--- validate hobby (multiple select)
for (i=0; i < document.getElementById('flavors').length; i++)
{
option = document.getElementById('flavors').options[i]
if (option.selected)
enteredFavors += option.value + " ";
}
if (enteredFavors == '') //nothing was chosen
errorMsg += ' Choose one or more flavors !!! \n' ;
if (document.getElementById('top1').checked == false && //--- validate entry of topping
document.getElementById('top2').checked == false &&
document.getElementById('top3').checked == false &&
document.getElementById('top4').checked == false )
errorMsg += ' Choose ice cream topping !!! \n' ;
if (!document.getElementById('visa').checked && //--- validate entry of credit card
!document.getElementById('mc').checked &&
!document.getElementById('amex').checked )
errorMsg += ' Choose a credit card !!! \n' ;
if (errorMsg) //--- if there are errors
{
alert('Please correct the following: \n' +
'---------------------------------- \n' +
errorMsg);
return(false);
}
return(true);
}
</script>
<!---------------------------------------------------------------------------------->
</body>
</html>