Scripting (Blended)
3 credits
| All three pages created | 10 |
| 4 or more products are displayed | 10 |
| User can select products to order | 10 |
| Selected products are submitted to checkout form and are shown | 20 |
| Checkout form cannot be displayed without ordering products | 20 |
| Checkout form requires fields to be complete before submitting with error messages | 10 |
| Required information is included in form including hidden fields for ordered products | 10 |
| Same As box functions correctly | 10 |
| Total | 100 pts |
To practice using javascript to pass values between pages as URL Parameters
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.