MetroWorks Business Order Form

MetroWorks Business Order Form

by Mark

HTML

<!-- Begin Form 1 -->
<div id="form1" class="n15_form n15_form1 n15_wrap">
<!-- Products and Pricing -->
<div class="n15_table_wrap"><table class="n15_table_pass">
<tbody>
<tr class="n15_gray n15_tablec">
<td colspan="2" style="text-transform: uppercase; font-weight: bold;"> Item </td>
<td colspan="2" style="text-transform: uppercase; font-weight: bold;"> Description </td>
<td style="text-transform: uppercase; font-weight: bold;"> QTY </td>
<td style="text-transform: uppercase; font-weight: bold;"> Unit Price </td>
<td style="text-transform: uppercase; font-weight: bold;"> Line Total </td>
</tr>
<!-- Local Service --><tr class="n15_tablel alt">
<td colspan="2" class="n15_table_image"><img src="" alt="" title="works Local-31 Day Pass" style="width: 164px; height: 103px;" />&#160;</td>
<td colspan="2" class="n15_pl5"> Local Service includes bus routes 1-99, 200-499 and UT Shuttles </td>
<td class="n15_table_price"><input name="ls_qty" ektdesignns_nodetype="element" id="ls_qty" ektdesignns_caption="Local Service Quantity:" ektdesignns_name="ls_qty" title="Local Service Quantity:" class="n15_qty_1b design_textfield" type="text" min="0" placeholder="0" size="34" />&#160;</td>
<td class="n15_table_price"><input type="currency" name="ls_unit_cost" ektdesignns_nodetype="element" id="ls_unit_cost" ektdesignns_caption="Local Service Unit Cost:" ektdesignns_name="ls_unit_cost" title="Local Service Unit Cost:" class="n15_single_price_1b design_readonly design_textfield" value="$33.00" readonly="readonly" size="34" />&#160;</td>
<td class="n15_table_price "><input type="currency" name="ls_total" ektdesignns_nodetype="element" id="ls_total" ektdesignns_caption="Local Service Total:" ektdesignns_name="ls_total" title="Local Service Total:" class="n15_total_price_1b design_readonly design_textfield" value="$0.00" readonly="readonly" size="34" />&#160;</td>
</tr>
<!-- Premium Service --><tr class="n15_tablel alt">
<td colspan="2" class="n15_table_image"><img src="" alt="works...

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

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

			// 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();
			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;

// Jquery for Form 1 First table row Local 31Day...