JAVASCRIPT – LESSON 8 – THE FORM VALIDATION..

 

Complete PIZZA ORDERING FORM with validation and clear function.

** SEE MAIL SUBMIT DOC for PHP method of submit.

 

<html>

<head>

<title>Html and Javascript </title>

<script>

function doSubmit()

{

            if (validateText() == false)

            {

                        alert("Required data missing in Step 1");

                        return;

            }

            alert("Your Pizza order has been submitted.");

            return;

}

 

function doClear()

{

            document.Pizzaform.customer.value = "";

            document.Pizzaform.address.value = "";

            document.Pizzaform.city.value = "";

            document.Pizzaform.state.value = "";

            document.Pizzaform.zip.value = "";

            document.Pizzaform.phone.value = "";

            document.Pizzaform.size[0].checked = false;

            document.Pizzaform.size[1].checked = false;

            document.Pizzaform.size[2].checked = false;

            document.Pizzaform.toppings[0].checked = false;

            document.Pizzaform.toppings[1].checked = false;

            document.Pizzaform.toppings[2].checked = false;         

            document.Pizzaform.toppings[3].checked = false;

            document.Pizzaform.toppings[4].checked = false;

            document.Pizzaform.toppings[5].checked = false;

            return;

}

 

function validateText()

{

            if (document.Pizzaform.customer.value == "") return false;

 

            if (document.Pizzaform.address.value == "") return false;

            if (document.Pizzaform.city.value == "") return false;     

            if (document.Pizzaform.phone.value == "") return false;

            return true;

}

</script>

</head>

 

<body>

<form name="Pizzaform">

<h1>The JavaScript Pizza Parlor </h1>

<br>

<h4>Step 1: Enter your name, address, and phone number;</h4>

<font face="courier">

Name: <input name="customer" type="Text" size=50> <br>

Address: <input name="address" type="Text" size=50> <br>

City: <input name="city" type="Text" size=16> <br>

State: <input name="state" type="Text" size=4> <br>

Zip: <input name="zip" type="Text" size=8> <br>

</font>

 

<br><br>

<h4>Step 2: Select the size of pizza you want:</h4>

<font face="courier">

<input name="size" type="radio">small

<input name="size" type="radio">medium

<input name="size" type="radio">large<br>

</font>

<br><br>

 

<h4>Step 3: Select the pizza toppings you want:</h4>

<font face="courier">

<input name="toppings" type="checkbox">Pepperoni

<input name="toppings" type="checkbox">Canadian Bacon

<input name="toppings" type="checkbox">Sausage<br>

<input name="toppings" type="checkbox">Mushrooms

<input name="toppings" type="checkbox">Pineapple

<input name="toppings" type="checkbox">Black Olives<br>

 

</font>

<br>

<br>

<input type="button" value="Submit Order" onClick="doSubmit()">

<input type="button" value="Clear Entries" onClick="doClear()">

</form>

</body>

</html>