8
Using javascripts to validate this form.
Basic operation, when a user clicks the submit order button, the javascript code must validate everything entered by the user.
Please help finnish this form.
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Purchase Order</title>
<script language="javascript">
<!--Hide from old browsers
function Validate(myform) {
var OrdFisrtName = document.Order.FirstName.value
if (OrdFisrtName == " ") {
alert("Please enter your First Name")
document.Order.FirstName.value = " "
document.Order.FirstName.focus()
}
else {
var OrdLastName = document.Order.LastName.value
if (OrdLastName == " ") {
alert("Please enter you Last Name")
document.Order.LastName.value = " "
document.Order.LastName.focus()
}
else {
var OrdAddress1 = document.Order.Address1.value
if (OrdAddress1 == " ") {
alert("Please enter your 1st Street Address")
document.Order.Address1.value = " "
document.Order.Address1.focus()
}
else {
var OrdAddres2 = document.Order.Address2.value
if (OrdAddres2 == " ") {
alert("Please enter your 2nd Street Address")
document.Order.Address2.value = " "
document.Order.Address2.focus()
}
else {
var OrdCity = document.Order.City.value
if (OrdCity == " ") {
alert("Please enter your City")
document.Order.City.value = " "
document.Order.City.focus()
}
else {
var OrdState = document.Order.State.value
var OrdState = parseInt(OrdState,10)
if (isNaN(OrdState)) {
alert("Invalid State, your State must be numeric")
document.Order.State.value = " "
document.Order.State.focus()
}
else {
var OrdZip = document.Order.Zip.value
var OrdZip = parseInt(OrdZip,10)
if (isNaN(OrdZip)) {
alert("Invalid Zip, your Zip must be numeric")
document.Order.Zip.value = " "
document.Order.Zip.focus()
}
else {
var OrdPhone = document.Order.Phone.value
var OrdPhone = parseInt(OrdPhone,10)
if (isNaN(OrdPhone)) {
alert("Invalid Phone Number, your Phone Number must be numeric(e.g:0723835373)")
document.Order.Phone.value = " "
document.Order.Phone.focus()
}
else {
var OrdFax = document.Order.Fax.value
var OrdFax = parseInt(OrdFax,10)
if (isNaN(OrdFax)) {
alert("Invalid Fax Number, your Fax Number must be numeric(e.g:012 429 3221)")
document.Order.Fax.value = " "
document.Order.Fax.focus()
}
else {
var OrdCredit = document.Order.Credit.value
var OrdCredit = parseInt(OrdCredit ,10)
if (isNaN(OrdCredit)) {
alert("Invalid Credit Card Number, your Credit Card Number must be numeric")
document.Order.Credit.value = " "
document.Order.Credit.focus()
}
}
}
}
}
}
}
}
}
}
}
//-->
</script>
</head>
<body>
<form name="Order" action="http://www.scsite.com" method="post" enctype="text/plain">
<table border="0" width="584" height="1017">
<tr>
<td height="1011" width="574">
<h1>Purchase Order</h1>
<h2>Products</h2>
<p>Hand Tools <select name="Hand">
<option>Hand Tool
<option>Hammer
<option>Wrenhes
</select>
Power Tools <select name="Power">
<option>Power Tool
<option>Drill Machine
<option>Jigsaw
</select>
Building Materials <select name="Builing">
<option>Materials
<option>Plywood
<option>Shingles
<option>Nails
<option>Screws
</select>
</p>
<h2>Customer Information</h2>
<p>First Name <input type="text" name="FirstName" value=" "> Last Name <input type="text" name="LastName" value=" "></p>
<p>Street Address 1 <input type="text" name="Address1" size="49" value=" "></p>
<p>Street Address 2 <input type="text" name="Address2" size="49" value=" "></p>
<p>City <input type="text" name="City" size="30" value=" "> State <input type="text" name="State" size="6" value=" ">
Zip <input type="text" name="Zip" size="10" value=" ">
</p>
<p>Phone <input type="text" name="Phone" value=" "> Fax <input type="text" name="Fax" value=" "></p>
<p>Payment Method? <input type="radio" name="test" value="Visa" onclick="document.Order.Credit.focus()">Visa <input type="radio" name="test" value="Master" onclick="document.Order.Credit.focus()">Master Card
<input type="radio" name="test" value="American" onclick="document.Order.Credit.focus()">American Express
</p>
<p>Credit Card Number <input type="text" name="Credit" size="49" value=" "></p>
<p>Expiration Month <select name="Month">
<option>Month
<option>Jan
<option>Feb
<option>Mar
<option>Apr
<option>May
<option>Jun
<option>Jul
<option>Aug
<option>Sep
<option>Oct
<option>Nov
<option>Dec
</select>
Expiration Year <select name="Year">
<option>Year
<option>2005
<option>2006
<option>2007
<option>2008
<option>2009
<option>2010
<option>2011
<option>2012
<option>2013
<option>2014
<option>2015
</select>
</p>
<h2>Shipping Information</h2>
<p>Click here if shipping information is different from the billing information. <input type="checkbox" name="checkInfo" value="true" onclick="document.Order.First.focus()"></p>
<p>First Name <input type="text" name="First" value=" "> Last Name <input type="text" name="Last" value=" "></p>
<p>Street Address 1 <input type="text" name="Addr1" size="49" value=" "></p>
<p>Street Address 2 <input type="text" name="Addr2" size="49" value=" "></p>
<p>City <input type="text" name="City1" size="30" value=""> State <input type="text" name="State1" size="6" value=" ">
Zip <input type="text" name="Zip1" size="10" value="">
</p>
<p>Phone <input type="text" name="Phone1" value=" "> Fax <input type="text" name="Fax1" value=" "></p>
<p><input type="button" value="Submit Order" onclick="Validate(Order)"></p>
<h2>Office Use Only</h2>
<p>Product Shipped to customer? <input type="radio" name="test" value="Yes" onclick="document.Order.Date.focus()">Yes <input type="radio" name="test" value="No">No</p>
<p>Date Shipped <input type="text" name="Date" value=" "></p>
<p> </td>
</tr>
</table>
</form>
</body>
</html>
