Higher Education Order Form rev1

by freedawirl

HTML

<!-- Begin Form 2 -->
<div id="form2" class="n15_form n15_form2 n15_wrap">
    <div class="z15_header">
        <h1>Higher Education Customer Sales Order</h1>

<a class="back-link" href="/metroworks.aspx?id=3795" title="Back to MertoWorks Higher Education">‹ ‹ Go Back</a>
&#160;</div>
    <div class="n15_row">
        <!-- Order number wrap -->
        <div class="z15_order_input_wrap"><span>Order Number </span>
            <input type="text" name="OrderNumber" ektdesignns_nodetype="element" id="OrderNumber" ektdesignns_caption="Order Number" ektdesignns_name="OrderNumber" title="Order Number" size="34" class="design_textfield n15_order_id" placeholder="Enter Order #" />&#160;</div>
        <div class="n15_customer_info_wrap">
            <div id="CustomerInfo">
                <h4>CUSTOMER</h4>

                <ul>
                    <li><span class="railred">*</span>
                        <input type="text" name="ContactName" ektdesignns_nodetype="element" id="ContactName" ektdesignns_caption="Contact Name" ektdesignns_name="ContactName" title="Contact Name" class="design_textfield" placeholder="Contact Name" size="34" />&#160;</li>
                    <li><span class="railred">*</span>
                        <input type="text" name="CompanyName" ektdesignns_nodetype="element" id="CompanyName" ektdesignns_caption="Company Name" ektdesignns_name="CompanyName" title="Company Name" class="design_textfield" placeholder="Company Name" size="34" />&#160;</li>
                    <li><span class="railred" style="font-size: 10pt;">*</span><span style="font-size: 10pt;"></span>
                        <input type="text" name="Address" title="Address " class="design_textfield" id="Address" maxlength="2000" alt="Address" ektdesignns_caption="Address" ektdesignns_name="Address" ektdesignns_nodetype="element" placeholder="Street Address" size="34" />&#160;</li>
                    <li><span class="railred" style="font-size: 10pt;">*</span><span style="font-size:...

CSS

#MetroWorksFormContent {
}
#MetroWorksFormContent.contentborder {
    border: 1px solid #dedede;
    border: 1px solid #fff;
    padding: 0px;
    margin:0;
}
* {
    font-family:'PT Sans', sans-serif
}
.n15_wrap {
    padding: 25px 15px;
}
a {
    color: #0068ac;
}
.n15_heading {
    border-bottom: 4px solid orange;
    margin-bottom: 20px;
    font-family:'PT Sans', sans-serif;
}
.n15_text_wrap {
    width: 60%;
    float: left;
}
.n15_image_wrap {
    float: right;
}
.n15_table_wrap {
    padding: 25px 0;
}
.n15_table_header {
    color: #1068ab;
    letter-spacing: 1px;
    font-weight: normal;
    font-size: 30px;
    margin: 0 0 10px;
}
.n15_table_header span {
    color: #6fb132;
}
.n15_table_header small {
    font-size: 18px;
    color: #0b7dbb;
}
.n15_table_pass {
    width: 100%;
    color: #fff;
    border-collapse: collapse;
}
.n15_table_pass tr {
    /*height: 25px;*/
    font-family:'PT Sans', sans-serif;
}
.n15_table_pass tr.alt:hover {
    background: #f1f1f1;
}
.n15_table_pass tr:nth-child(3), .n15_table_pass tr:nth-child(4), .n15_table_pass tr:nth-child(5), .table_pass tr:nth-child(6) {
    color: #000;
}
.n15_table_pass td {
    padding: 2px 0;
    font-size: 17px;
    font-family:'PT Sans', sans-serif;
}
.n15_table_pass td:first-child {
    text-align: left;
    padding: 5px;
    width: 155px;
}
.n15_government .n15_table_pass tr:first-child td {
    font-size: 14px;
}
.n15_contact_wrap {
    padding-bottom: 20px;
}
.n15_btn_wrap {
    display: inline-block;
    margin: 0 20px 0 0;
}
.n15_btn_wrap span {
    margin: 0 0 0 20px;
    font-size: 14px;
    color: #0068ac;
}
.n15_btn_wrap a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
}
.n15_btn {
    /*border-radius: 20px;*/
    letter-spacing: 1px;
    text-align: center;
    font-family: Helvetica;
    background: #063684;
    color: #fff;
    font-weight: bold;
    border: 0;
    padding: 10px 30px;
    font-size: 13px;
    text-transform: uppercase;
    cursor:...

JavaScript

// Variables for the Higher-Ed form

var n15_qty_1e = $('.n15_qty_1e').val();
var n15_qty_2e = $('.n15_qty_2e').val();
var n15_qty_3e = $('.n15_qty_3e').val();
var n15_qty_4e = $('.n15_qty_4e').val();

var n15_p_1e_single_price
var n15_p_2e_single_price
var n15_p_3e_single_price
var n15_p_4e_single_price

//var n15_total_price_1e = $('.n15_total_price_1b').val();
//var n15_total_price_2e = $('.n15_total_price_2b').val();
//var n15_total_price_3e = $('.n15_total_price_3b').val();
//var n15_total_price_4e = $('.n15_total_price_4b').val();

var n15_total_price_1e = $('.n15_total_price_1e').val();
var n15_total_price_2e = $('.n15_total_price_2e').val();
var n15_total_price_3e = $('.n15_total_price_3e').val();
var n15_total_price_4e = $('.n15_total_price_4e').val();


n15_total_price_1e = n15_total_price_1e.replace("$", "");
n15_total_price_2e = n15_total_price_2e.replace("$", "");
n15_total_price_3e = n15_total_price_3e.replace("$", "");
n15_total_price_4e = n15_total_price_4e.replace("$", "");

var n15_total_price_e
var n15_qty_total_e
var n15_subtotal_price_e
var n15_final_price_e

// Variables for both forms

var n15_processing = 12.00;



// Second form Jquery

$('.n15_qty_1e, .n15_qty_2e, .n15_qty_3e, .n15_qty_4e, .n15_single_price_4e').on('change', function () {

    n15_qty_1e = $('.n15_qty_1e').val();

    // Setting Price

    n15_p_1e_single_price = 21.50;

    $('.n15_single_price_1e').val('$' + n15_p_1e_single_price.toFixed(2));

    n15_total_price_1e = n15_qty_1e * n15_p_1e_single_price;

    ($(this).closest("tr").find('.n15_total_price_1e').val('$' + n15_total_price_1e.toFixed(2)));

    // Jquery for Form 2 second table row

    n15_qty_2e = $('.n15_qty_2e').val();

    // Setting Price

    n15_p_2e_single_price = 32.00;

    $('.n15_single_price_2e').val('$' + n15_p_2e_single_price.toFixed(2));

    n15_total_price_2e = n15_qty_2e * n15_p_2e_single_price;

    ($(this).closest("tr").find('.n15_total_price_2e').val('$' +...