Fall 2015

Lab07
URL Parameter Passing

Due: Friday November 21, 2014 11:59 PM

Lab07 - URL Parameter Passing

Requirements

All three pages created10 pts
4 or more products are displayed10 pts
User can select products to order10 pts
Selected products are submitted to checkout form and are shown20 pts
Checkout form cannot be displayed without ordering products20 pts
Checkout form requires fields to be complete before submitting with error messages10 pts
Required information is included in form including hidden fields for ordered products10 pts
Same As box functions correctly10 pts
Total100 pts

Resources

Objective

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.

    <p>
        The homepage can introduce the site and include any additional information you would like.  It should also include a 
        link to the product page.
    </p>
    <p>
        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.
    </p>
    <p>
        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:
    </p>
    <table>
        <tr>
                        <th>Data</th>
                        <th>Field Name</th>
                    </tr>
        <tr>
            <td>First Name</td>
            <td>fname</td>
        </tr>
        <tr>
            <td>Last Name</td>
            <td>lname</td>
        </tr>
        <tr>
            <td>Shipping Address</td>
            <td>saddress</td>
        </tr>
        <tr>
            <td>Shipping City</td>
            <td>scity</td>
        </tr>
        <tr>
            <td>Shipping State</td>
            <td>sstate</td>
        </tr>
        <tr>
            <td>Shipping Zip</td>
            <td>szip</td>
        </tr>
        <tr>
            <td>Billing Address</td>
            <td>baddress</td>
        </tr>
        <tr>
            <td>Billing City</td>
            <td>bcity</td>
        </tr>
        <tr>
            <td>Billing State</td>
            <td>bstate</td>
        </tr>
        <tr>
            <td>Billing Zip</td>
            <td>bzip</td>
        </tr>
        <tr>
            <td>Credit Card Type</td>
            <td>ccardtype</td>
        </tr>
        <tr>
            <td>Credit Card Number</td>
            <td>ccardno</td>
        </tr>
        <tr>
            <td>Credit Card Expiration Date</td>
            <td>ccardexp</td>
        </tr>
    </table>
    <p>
        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.
    </p>
    <p>
        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.
    </p>
    <p>
        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.
    </p>