To practice using javascript to pass values between pages as URL Parameters
Instructions
For this lab you will need to create a small website that allows customers to select and order products. The site should consist of three pages: a homepage, a product page, and an order form.
The homepage can introduce the site and include any additional information you would like. It should also include a link to the product page.
The product page should display a minimum of 4 products of your choosing that includes a product ID, a picture, a price, and description of each product. There should be some mechanism included that allows the user to select which products they want to order. A user should be able to select any combination of products that they would like. At the bottom of the product page there should be a button that will allow the user to submit their order. This button should not function unless the user has selected at least one product. If they click the button without first selecting at least one product an error message should be displayed in some form.
When the user clicks the submit order button on the product page and has selected at least one product to order they should be taken to an order form. This order form should display a table that shows the products that were selected on the previous page, the price of each product, and a total price for the order (the sum of the selected products prices). The form should also then make available form controls that allow the user to enter the the following information:
| Data | Field Name |
|---|---|
| First Name | fname |
| Last Name | lname |
| Shipping Address | saddress |
| Shipping City | scity |
| Shipping State | sstate |
| Shipping Zip | szip |
| Billing Address | baddress |
| Billing City | bcity |
| Billing State | bstate |
| Billing Zip | bzip |
| Credit Card Type | ccardtype |
| Credit Card Number | ccardno |
| Credit Card Expiration Date | ccardexp |
The form should include a checkbox that allows the user to indicate that their shipping and billing address are the same. If this checkbox is checked all of the shipping address information should be copied to the billing address fields.
The form should also contain hidden fields for each product ID that the user selected. The field names for these hidden fields should be "product01", "product02", and so on until all of the products have been assigned to hidden fields. We will assume that the server would know what the name and price for each product is and could complete the order on its own once the product ID's have been sent to it.
A submit and a clear button should be available at the bottom of the form. When the form is submitted the data should be sent to a dummy URL. If any of the fields are not complete, the form should not submit and an error should be displayed for the user explaining why the form will not submit.