Untitled

<!DOCTYPE html>
<html>
        <head>
            <title>Widget Form</title>
        <meta charset="utf-8">
<script type="text/javascript" src="processForm.html">

    function validateForm() {
        var province = document.forms["orderForm"]                                  ["province"].value;
            if (province == "null"){
                    alert("Please choose a province");
                        return false;}
        if (orderForm.widget1Qty.value == 0
            && orderForm.widget2Qty.value == 0
            && orderForm.widget3Qty.value == 0)
    {alert( "You need to order atleast one item." );
                    return false;
        }
        }
</script>

    </head>
    <body>
        <h2>Order Form</h2>
        <form name="orderForm" method="post" action="processForm.html" onsubmit="return validateForm()">
        <table>
            <tr>
                <th colspan="2">Personal Information</th>
            </tr>
            <tr>
                <td>First Name:</td>
                <td><input type="text" name="firstName" id="firstName" size="30" required></td>
            </tr>
            <tr>
                <td>Last Name:</td>
                <td><input type="text" name="lastName" id="lastName" size="30" required></td>
            </tr>
            <tr>
                <td>Address:</td>
                <td><input type="text" name="address" id="address" size="30" required></td>
            </tr>
            <tr>
                <td>City:</td>
                <td><input type="text" name="city" id="city" size="30" required></td>
            </tr>
            <tr>
                <td>Province:</td>
                <td><select name="province" id="province" size="1">
                        <option value="null">Select a province</option>
                        <option value="BC">British Columbia</option>
                        <option value="AB">Alberta</option>
                        <option value="SK">Saskatchewan</option>
                        <option value="MB">Manitoba</option>
                        <option value="ON">Ontario</option>
                        <option value="QC">QuÃ©bec</option>
                        <option value="NB">New Brunswick</option>
                        <option value="NS">Nova Scotia</option>
                        <option value="PE">Prince Edward Island</option>
                        <option value="NF">Newfoundland</option>
                        <option value="YK">Yukon</option>
                        <option value="NWT">Northwest Territories</option>
                        <option value="NU">Nunavut</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>Postal Code:</td>
                <td><input type="text" name="postalCode" id="postalCode" maxlength="6" pattern=".{6}" input pattern=".{6}" required title="Must be 6 Characters"></td>
            </tr>
            <tr>
                <th colspan="2">Order Information</th>
            </tr>
            <tr>
                <td rowspan="3">Select your products:<br>
                    <span id="productError" class="errorMessage" hidden></span></td>
                <td>Widget #1&nbsp;
                    <input type="text" name="widget1Qty" id="widget1Qty" size="1" value="0" pattern = "[0-9]{1}[0-9]{0,4}" required title="Please enter a valid quantity">
Qty @ <strong>$5.00/ea</strong></td>
            </tr>
            <tr>
                <td>Widget #2&nbsp;
                    <input type="text" name="widget2Qty" id="widget2Qty" size="1" value="0" pattern = "[0-9]{1}[0-9]{0,4}" required title="Please enter a valid quantity"
>Qty @ <strong>$15.00/ea</strong></td>
            </tr>
            <tr>
                <td>Widget #3&nbsp;
                    <input type="text" name="widget3Qty" id="widget3Qty" size="1" value="0" pattern = "[0-9]{1}[0-9]{0,4}"  required title="Please enter a valid quantity">
                     Qty @ <strong>$25.00/ea</strong></td>
            </tr>
            <tr>
                <td rowspan="3">Shipping Type:</td>
                <td>Standard ($5.00)<input type="radio" name="shippingType" id="shippingTypeStandard" value="Standard" checked></td>

            </tr>
            <tr>
                <td>Express ($10.00)<input type="radio" name="shippingType" id="shippingTypeExpress" value="Express"></td>
            </tr>
            <tr>
                <td>Overnight ($20.00)<input type="radio" name="shippingType" id="shippingTypeOvernight" value="Overnight"></td>
            </tr>
            <tr>
                <th colspan="2">Submit Order</th>
            </tr>
            <tr>
                <td><input type="submit" name="btnSubmit" id="btnSubmit" value="Submit Order"></td>
                <td><input type="reset" name="btnReset" id="btnReset" value="Reset Form"></td>
            </tr>
        </table>
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <title>Week 7 Lab - JavaScript DOM and Arrays</title>
        <meta charset="utf-8">
<script type="text/javascript" src="Week7Lab_ChafikKassis.html">


function getWidgetTotal(){
    var theForm = document.forms["orderForm"];
    var widget1 = theForm.elements["widget1Qty"] * 5.00;
    var widget2 = theForm.elements["widget2Qty"] * 15.00;
    var widget3 = theForm.elements["widget3Qty"] * 25.00;
    var widgetTotal = widget1 + widget2 + widget3;

    return widgetTotal;
}

function getShippingTotal(){
    var shippingPrices = new Array();
        shippingTotal["Standard"]=5;
        shippingTotal["Express"]=10;
        shippingTotal["Overnight"]=20;

    var shippingTotal=0;
    var theForm = document.forms["orderForm"];
    var shippingType = theForm.elements["shippingType"];

    for(var i = 0; i < shippingType.length; i++)
    {
          if(shippingType[i].checked)
        {
         shippingTotal = shippingPrices[shippingType[i].value];
         break;
        }
    }

    return shippingTotal;
}


function getTotal(){
     var totalPrice = getWidgetTotal() + getShippingTotal();

    document.getElementById('output').innerHTML =
                                      "Total Price: $";
}

    </script>
    </head>
    <body>
        <h1>Form Submitted Successfully</h1>
        <div id="output"></div>
    </body>
</html>