Higher Education Order Form

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: 10pt;"> </span><input type="text" name="City" title="City   " class="design_textfield" id="City" maxlength="2000" alt="City" ektdesignns_caption="City" ektdesignns_name="City" ektdesignns_nodetype="element" placeholder="City"...

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: :pointer;
}
.n15_btn:hover{
	background: #444;
}
/* Form Table Styles */
.n15_form .n15_table_pass {
	color: #444;
}
.n15_form .n15_table_pass td {
	width: 100px;
	border: 1px solid...

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').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)));

				// Code to update the total QTY

				n15_qty_total_e = Number(n15_qty_1e) + Number(n15_qty_2e) + Number(n15_qty_3e) + Number(n15_qty_4e);

				$('.n15_qty_total_e').val(n15_qty_total_e);
				
				// Getting and Setting the Subtotal Price

				n15_subtotal_price_e = Number(n15_total_price_1e) +...