DO NOT USE ANYTHING THAT WE HAVE NOT LEARNED YET. THE LESSONS STOP AT WEEK 9. We want to learn step by step, i.e. be able to use what we have learned during the first 9 weeks.

Think along the line of your business, hobbies, or personal Web site.

Create an Order Form. So create a link to Order Form. When clicked, an ordering form is loaded. Use only one form.

The form must collect the customer's name, address, phone number, credit card information, etc. as required below. The user must enter the following (all the fields are required so you must check for non blank and nonzero length).

So create a Web page to display a form with the following fields (use all the names exactly as given below so that you can see how the form is processed):

• First Name (name=first): check for non blank and nonzero length.
• Last Name (name=last): check for non blank and nonzero length.
• Street Address (name=address): check for non blank and nonzero length.
• City (name=city): check for non blank and nonzero length.
• State (name=state): check for non blank and nonzero length.
• Zip (name=zip): must provide either a 5-digit zip code or a 5+4 zip code (all must be numbers and check for the length. The script must allow the user to enter either 5 digits or 9 digits. So when the user enters 5 digits, it's OK. Another user enters 9 digits, it's also OK).
• Telephone number (name=phone): the format must be (xxx) xxx-xxxx.
(Check for the exact format with the numbers. Use only one field for the phone).
• EMail (name=email): check for non blank and nonzero length.
• Credit card number (max length is 16) (name=ccnum): check for a 16 digit number.
• Select list for credit card type (name=cctype)
• Credit card expiration date (format is mm/yyyy) (name=ccexpire): check for the format mm/yyyy. (Make sure that the card is valid by comparing with the current date). You can use the date object if you want.
• Comment (name=comment) (use multi-line input)

For all the fields, you set your own size and maximum length. For the comment field, you can set your own number of columns and rows. Last but not least, include a hidden field containing your email address as the value with name=myemail.

I have created a script on the server to process the form. So you can use Post for the method and the following URL as an action for your form:

http://voyager.deanza.edu/~hso/cgi-bin/form420.cgi

You can test your form to see if it works. Just load the html file locally from your PC on a browser and click on the Submit button after entering all the information.

The form validation is done only when the Submit button is clicked (i.e. don't alert on every single field, wait for the user to click on the submit button to display an alert if there is an error. This is to give time for the user to fill out the form). If a field is left blank, display an alert message, focus on that field and select the text in the field so that the user can enter the data.

Then create a list of products that the user can order. For example,

The default values are blank except the shipping and handling that you have to enter as a default.

You must also have some categories and not products only.

The script performs the following when the user enters a quantity:

• The total price gets updated.
• The subtotal is updated.
• The sales tax is computed.
• The Grand Total is updated (don't add shipping and handling if the quantity is zero).

You can have the list of products first and the user's information below it if you want. The main goal is to display the calculation of the price right away when a quantity is entered. As for the user's information, do the validation only when the Submit button is clicked (i.e. don't alert on every single field, wait for the user to click on the Submit button). If a field is left blank, display an alert message and focus on that field so that the user can enter the data.

You must use only ONE form. When the Submit button is clicked, the form gets validated and if there's no error, it should clear the form. If there's an error such as a field is left blank, then the cursor is positioned in that field and the text in that field is selected for the user to enter the correct data until there's no more error.

For example, when the user doesn't enter anything by clicking on the Submit button, an alert box is popped up saying that the first name must be entered. When the user clicks on the OK button of the alert dialog box, the alert box is closed and the cursor is focused (pointed) to the first name input box and if there's any text in it, the text got selected (highlighted).

Let say that the user enters the first name, last name, address, and click on the Submit button. An alert box is displayed saying the city must be entered.

This happens with every single input box.

Make sure to read the requirements very carefully. Once your assignment is submitted, it's not allowed for you to redo it. I do not regrade. One day late is 10% off. A perfect assignment with more than 2 weeks late will get a maximum of 10% only.

Email me in the format shown below to inform me that your lab is ready to be graded. I highly suggest you send yourself a courtesy copy (cc).

{Your name}
{Your Voyager account name (e.g. xyz36459}
{Class: CIS89C}
{Assignment #8}

I cannot grade if I don't receive your email.