This is the source page for the Pizza order form and its Javascript code.
The head section contains the declarations of global Javascript variables and the Javascript functions that are used by the form.
<html> <head> <title>Fred's Pizza CyberParlor</title> <script language="javascript"> <!--
The script uses one global variable:
var pizzasize;
A set of functions are defined; the first, emptyfield, is used when checking for missing data, the next few are used in the calculations of pizza cost.
function emptyField(textObj)
{
if(textObj.value.length == 0) return true;
for(var i=0; i<textObj.value.length;i++) {
ch = textObj.value.charAt(i);
if(ch != ' ' && ch != '\t') return false;
}
return true;
}
function basecost(radioObj)
{
pizzasize = 1;
if(radioObj[0].checked) cost = 7.00; // regular
if(radioObj[1].checked) {
cost = 11.00; // family
pizzasize = 2;
}
if(radioObj[2].checked) {
cost = 15.00; // popular
pizzasize = 3;
}
return cost;
}
function toppingscost(selectObj)
{
tcost = 0.0;
for(var i=0;i<selectObj.length;i++)
if(selectObj[i].selected) tcost += 0.50*pizzasize;
return tcost;
}
function extrascost(selectObj)
{
ecost = 0;
if(selectObj[0].selected) ecost += 1.70; // Coke
if(selectObj[1].selected) ecost += 1.70; // Lemonade
if(selectObj[2].selected) ecost += 3.50; // Ice cream
if(selectObj[3].selected) ecost += 4.50; // Salad
return ecost;
}
function deliverycost(selectObj)
{
if(selectObj[0].selected) Dcost = 1.50; // Express
else if(selectObj[1].selected) Dcost = 15.0; // Gorrila
else if(selectObj[2].selected) Dcost = 20.0; // Fat lady
else if(selectObj[3].selected) Dcost = 50.0; // Female stripper
else if(selectObj[4].selected) Dcost = 40.0; // Male stripper
else if(selectObj[5].selected) Dcost = 25.0; // Coco the clown
else if(selectObj[6].selected) Dcost = 1.65; // Bozo the programmer
else if(selectObj[7].selected) Dcost = 101.50; // Fred the cook
return Dcost;
}
The main checking function, confirmPizza, is the one invoked when the form's submit button is used. It is passed a reference to the form (it could have been coded to use the named form directly rather than have a reference argument). The function starts by using the emptyField function to check each of the text entry fields that must contain some input data. If any field is empty, an alert box is displayed warning the user and the function returns false (so stopping form submission). The function alert is not a global function, it is a method of the Window object (a predefined singleton object); the script interpreter is smart enought to work out that it is the window.alert function that is being called.
function confirmPizza(formObj)
{
if(emptyField(formObj.customer) ) {
alert("You forgot to enter your name");
return false;
}
if(emptyField(formObj.address) ) {
alert("We really do need a delivery address");
return false;
}
if(emptyField(formObj.email) ) {
alert("We need your email address");
return false;
}
if(emptyField(formObj.phone) ) {
alert("We need your phone");
return false;
}
If the text fields have data, compute the cost.
total = basecost(formObj.p_size); total +=toppingscost(formObj.tops); total +=extrascost(formObj.xtra); total +=deliverycost(formObj.deliv);
When the cost is known, put up a confirmation dialog that will determine whether the order should be submitted.
return confirm("The cost is " + total + ", place order?");
}
// -->
</script>
</head>
The body of the page defines the actual form.
<body> <h1>Fred's Pizzas, Order Form</h1> Pizza size <br/>
The form tag has an onSubmit attribute that
has code invoking the confirmPizza function:
<form name="pizzaform"
onSubmit= "return confirmPizza(pizzaform)" >
Regular <input type="radio" name="p_size" value="reg">
Family <input type="radio" name="p_size" value="fam">
Popular <input type="radio" checked name="p_size" value="pop">
<br />
Toppings
<select name="tops" size="3" multiple>
<option>Cheese</option>
<option>Pepperoni</option>
<option>Ground beef</option>
<option>Chicken</option>
<option>Bacon</option>
<option>Olives</option>
<option>Anchovies</option>
<option>Sun dried tomatoes</option>
</select>
<br />
Extras
<select name="xtra" size="1" multiple>
<option selected>Coke</option>
<option>Lemonade</option>
<option>Ice cream</option>
<option>Salad</option>
</select>
Delivery
Some of the input fields have little bits of inline Javascript that performs trivial actions when particular events occur - such as an input field acquiring "focus".
<select name="deliv" size="1" onfocus="{ window.status='Choose among delivery options!';}" >
<option selected>Express</option>
<option>Gorrila</option>
<option>Fat lady who sings</option>
<option>Female stripper</option>
<option>Male stripper</option>
<option>Coco the clown</option>
<option>Bozo the programmer</option>
<option>Fred the cook</option>
</select>
<br />
<hr />
<em>You MUST fill in the following fields:</em>
Your name
<input type="text" size="20" maxlength="50" name="customer"
onfocus="{ window.status='remember to tell us your name';}">
<br />
Address
<textarea name="address" cols="40" rows="3"
onfocus="{ window.status='Our psychic delivery person is on hols, you MUST tell us your address';}">
</textarea>
<br />
email <input type="text" size="20" maxlength="50" name="email">
phone <input type="text" size="20" maxlength="20" name="phone">
<hr>
<input type="submit" value="Place Order">
</form>
<hr>
Have a good day.
</body>
</html>