MetroWorks Business Oder Form Final_rev1

MetroWorks Business Oder Form

by freedawirl

HTML

<!-- Begin Form 1 --><div id="form1" class="n15_form n15_form1 n15_wrap"><div class="z15_header"><h1>Business Customer Sales Order</h1>
<a class="back-link" href="/metroworks.aspx?id=3796" title="Back to MertoWorks Business Section">‹ ‹ Go Back</a>

&#160;</div>
<div class="n15_row"><!-- Order number wrap --><div class="z15_order_input_wrap n15_gray"><span>Account Number </span><input type="text" name="account_number" ektdesignns_nodetype="element" id="account_number" ektdesignns_caption="Account Number" ektdesignns_name="account_number" title="Account Number" class="n15_order_id design_textfield" placeholder="Enter Order #" ektdesignns_validation="string-req" ektdesignns_datatype="string" ektdesignns_basetype="text" ektdesignns_schema="&lt;xs:minLength value=&quot;1&quot;/&gt;" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Please enter your account number" onblur="design_validate_re(/\S+/,this,'Please enter your account number');" size="34" />
    &#160;</div>
<div class="n15_customer_info_wrap"><div id="CustomerInfo"><h4>CUSTOMER</h4>
<ul>
<li><span class="railred">*</span><input type="text" name="contact_name" ektdesignns_nodetype="element" id="contact_name" ektdesignns_caption="Contact Name:" ektdesignns_name="contact_name" title="Contact Name Cannot be blank" class="design_textfield" placeholder="Contact Name" ektdesignns_validation="string-req" ektdesignns_datatype="string" ektdesignns_basetype="text" ektdesignns_schema="&lt;xs:minLength value=&quot;1&quot;/&gt;" ektdesignns_validate="re:/\S+/" ektdesignns_invalidmsg="Cannot be blank" onblur="design_validate_re(/\S+/,this,'Cannot be blank');" size="34" />
          &#160;</li>
<li><span class="railred">*</span><input type="text" name="company_name" ektdesignns_nodetype="element" id="company_name" ektdesignns_caption="Company Name:" ektdesignns_name="company_name" title="Company Name" class="design_textfield" placeholder="Company Name" ektdesignns_validation="string-req"...

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-top: 4px solid orange;
    margin-top: 20px;
    padding-top: 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;
    text-align: center;
}
.n15_btn_wrap span {
    margin: 0 0 5px 0;
    font-size: 24px;
    color: #0068ac;
    display: inline-block;
}
.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;
   ...

JavaScript

// Variables for the Business form

var n15_qty_1b = $('.n15_qty_1b').val();
var n15_qty_2b = $('.n15_qty_2b').val();
var n15_qty_3b = $('.n15_qty_3b').val();
var n15_qty_4b = $('.n15_qty_4b').val();

var n15_p_1b_single_price
var n15_p_2b_single_price
var n15_p_3b_single_price
var n15_p_4b_single_price

var n15_total_price_1b = $('.n15_total_price_1b').val();
var n15_total_price_2b = $('.n15_total_price_2b').val();
var n15_total_price_3b = $('.n15_total_price_3b').val();
var n15_total_price_4b = $('.n15_total_price_4b').val();
n15_total_price_1b = n15_total_price_1b.replace("$", "");
n15_total_price_2b = n15_total_price_2b.replace("$", "");
n15_total_price_3b = n15_total_price_3b.replace("$", "");
n15_total_price_4b = n15_total_price_4b.replace("$", "");

var n15_total_price_b
var n15_qty_total_b
var n15_subtotal_price_b
var n15_processing
var n15_final_price_b

// Variable for processing fee

var n15_processing = 12.00;


//------------- First Row Local 31Day Pass------------- //

$('.n15_qty_1b, .n15_qty_2b, .n15_qty_3b, .n15_qty_4b, .n15_single_price_4b').on('change keyup', function () {

    n15_qty_1b = $('.n15_qty_1b').val();
    n15_qty_2b = $('.n15_qty_2b').val();
    n15_qty_3b = $('.n15_qty_3b').val();
    n15_qty_4b = $('.n15_qty_4b').val();

    // Code to update the total QTY
    n15_qty_total_b = Number(n15_qty_1b) + Number(n15_qty_2b) + Number(n15_qty_3b) + Number(n15_qty_4b);

    // Getting the single price input and replacing the $ sign

    n15_p_4b_single_price = $('.n15_single_price_4b').val();
    n15_p_4b_single_price = n15_p_4b_single_price.replace("$", "");


    $('.n15_qty_total_b').val(n15_qty_total_b);

    n15_qty_total_b = $('.n15_qty_total_b').val();
    //-------- Row 1 Price Break Evaluation ------------//

    if (n15_qty_total_b < 10) {
        n15_p_1b_single_price = 33.00;
    };
    if (n15_qty_total_b >= 10 && n15_qty_total_b <= 50) {
        n15_p_1b_single_price = 29.70;
    };
    if (n15_qty_total_b > 50 &&...