Adding tax to sub-totals onchange

[tbsg]

My JavaScript knowledge is still at the beginner level. Struggling to get the final calculations for taxes in this form.

The form currently updates the Sub-total automatically when form selections are made. I also need the form to calculate the tax and total. The tax rate depends on the kind of shipping selected. For the first 2 options the rate is 13% for the 3rd it's 5%.

What do I need to do to get the final 2 calculations to work?

Here's the JavaScript from (mredkj.com):

function OrderForm(prefix, precision, firstChoice) {
	
	this.prefix = prefix ? prefix : '';
	
	// ****************************
	// Configure here
	// ****************************
	// names - Set these according to how the html ids are set
	this.FORM_NAME = this.prefix + 'frmOrder';
	this.BTN_TOTAL = this.prefix + 'btnTotal';
	this.TXT_OUT = this.prefix + 'txtTotal';
	
	// partial names - Set these according to how the html ids are set
	this.CHK = this.prefix + 'chk';
	this.SEL = this.prefix + 'sel';
	this.PRICE = this.prefix + 'txtPrice';
	
	// precision for the decimal places
	// If not set, then no decimal adjustment is made
	this.precision = precision ? precision : -1;
	
	// if the drop down has the first choice after index 1
	// this is used when checking or unchecking a checkbox
	this.firstChoice = firstChoice ? firstChoice : 1;
	// ****************************
	
	// form
	this.frm = document.getElementById(this.FORM_NAME);
	
	// checkboxes
	this.chkReg = new RegExp(this.CHK + '([0-9]+)');
	this.getCheck = function(chkId) {
		return document.getElementById(this.CHK + chkId);
	};
	
	// selects
	this.selReg = new RegExp(this.SEL + '([0-9]+)');
	this.getSelect = function(selId) {
		return document.getElementById(this.SEL + selId);
	};
	
	// price spans
	this.priceReg = new RegExp(this.PRICE + '([0-9]+)');
	
	// text output
	this.txtOut = document.getElementById(this.TXT_OUT);
	
	// button
	this.btnTotal = document.getElementById(this.BTN_TOTAL);
	
	// price array
	this.prices = new Array();
	
	var o = this;
	this.getCheckEvent = function() {
		return function() {
			o.checkRetotal(o, this);
		};
	};
	
	this.getSelectEvent = function() {
		return function() {
			o.totalCost(o);
		};
	};
	
	this.getBtnEvent = function() {
		return function() {
			o.totalCost(o);
		};
	};
	
	/*
	 * Calculate the cost
	 * 
	 * Required:
	 *  Span tags around the prices with IDs formatted
	 *  so each item's numbers correspond its select elements and input checkboxes.
	 */
	this.totalCost = function(orderObj) {
		var spanObj = orderObj.frm.getElementsByTagName('span');
		var total = 0.0;
		for (var i=0; i<spanObj.length; i++) {
			var regResult = orderObj.priceReg.exec(spanObj[i].id);
			if (regResult) {
				var itemNum = regResult[1];
				var chkObj = orderObj.getCheck(itemNum);
				var selObj = orderObj.getSelect(itemNum);
				var price = orderObj.prices[itemNum];
				var quantity = 0;
				if (selObj) {
					quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
					quantity = isNaN(quantity) ? 0 : quantity;
					if (chkObj) chkObj.checked = quantity;
				} else if (chkObj) {
					quantity = chkObj.checked ? 1 : 0;
				}
				total += quantity * price;
			}
		}
		if (this.precision == -1) {
			orderObj.txtOut.value = total
		} else {
			orderObj.txtOut.value = total.toFixed(this.precision);
		}
	};


	/*
	 * Handle clicks on the checkboxes
	 *
	 * Required:
	 *  The corresponding select elements and input checkboxes need to be numbered the same
	 *
	 */
	this.checkRetotal = function(orderObj, obj) {
		var regResult = orderObj.chkReg.exec(obj.id);
		if (regResult) {
			var optObj = orderObj.getSelect(regResult[1]);
			if (optObj) {
				if (obj.checked) {
					optObj.selectedIndex = orderObj.firstChoice;
				} else {
					optObj.selectedIndex = 0;
				}
			}
			orderObj.totalCost(orderObj);
		}
	};
	
	/*
	 * Set up events
	 */
	this.setEvents = function(orderObj) {
		var spanObj = orderObj.frm.getElementsByTagName('span');
		for (var i=0; i<spanObj.length; i++) {
			var regResult = orderObj.priceReg.exec(spanObj[i].id);
			if (regResult) {
				var itemNum = regResult[1];
				var chkObj = orderObj.getCheck(itemNum);
				var selObj = orderObj.getSelect(itemNum);
				if (chkObj) {
					chkObj.onclick = orderObj.getCheckEvent();
				}
				if (selObj) {
					selObj.onchange = orderObj.getSelectEvent();
				}
				if (orderObj.btnTotal) {
					orderObj.btnTotal.onclick = orderObj.getBtnEvent();
				}
			}
		}
	};
	this.setEvents(this);

	/*
	 *
	 * Grab the prices from the html
	 * Required:
	 *  Prices should be wrapped in span tags, numbers only.
	 */
	this.grabPrices = function(orderObj) {
		var spanObj = orderObj.frm.getElementsByTagName('span');
		for (var i=0; i<spanObj.length; i++) {
			if (orderObj.priceReg.test(spanObj[i].id)) {
				var regResult = orderObj.priceReg.exec(spanObj[i].id);
				if (regResult) {
					orderObj.prices[regResult[1]] = parseFloat(spanObj[i].innerHTML);
				}
			}
		}
	};
	this.grabPrices(this);
	
}

And the HTML:

<form id="frmOrder" method="post" action="quote-engine.php">
	<fieldset>
		<legend>Sawmill</legend>
		<table>
			<tr>
				<td>Sawmill 9.5 H.P Kohler Sawmill</td>
				<td>$<span id="txtPrice0">2799</span></td>
				<td>
					<select id="sel0">
						<option value="val0">0</option>
						<option value="val1">1</option>
						<option value="val2">2</option>
						<option value="val3">3</option>
					</select>
				</td>
			</tr>
		</table>
    </fieldset>
    
    <fieldset>
		<legend>Track Extension</legend>
		<table>
			<tr>
				<td>1 - 6' Track Extension - Cut 16ft logs</td>
				<td>$<span id="txtPrice1">375</span></td>
				<td>
					<select id="sel1">
						<option value="val0">0</option>
						<option value="val1">1</option>
						<option value="val2">2</option>
						<option value="val3">3</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>2 - 6' Track Extension - Cut 22ft logs</td>
				<td>$<span id="txtPrice2">750</span></td>
				<td>
					<select id="sel2">
						<option value="val0">0</option>
						<option value="val1">1</option>
						<option value="val2">2</option>
						<option value="val3">3</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>3 - 6' Track Extension - Cut 28ft logs</td>
				<td>$<span id="txtPrice3">1125</span></td>
				<td>
					<select id="sel3">
						<option value="val0">0</option>
						<option value="val1">1</option>
						<option value="val2">2</option>
						<option value="val3">3</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>4 - 6' Track Extension - Cut 34ft logs</td>
				<td>$<span id="txtPrice4">1500</span></td>
				<td>
					<select id="sel4">
						<option value="val0">0</option>
						<option value="val1">1</option>
						<option value="val2">2</option>
						<option value="val3">3</option>
					</select>
				</td>
			</tr>
		</table>
	</fieldset>

	<fieldset>
		<legend>Carriage Cover</legend>
		<table>
			<tr>
				<td>Heavy Duty Rubberized Head Cover</td>
				<td>$<span id="txtPrice5">100</span></td>
				<td>
					<select id="sel5">
						<option value="val0">0</option>
						<option value="val1">1</option>
						<option value="val2">2</option>
						<option value="val3">3</option>
					</select>
				</td>
			</tr>
		</table>
	</fieldset>
	
	<fieldset>
		<legend>Blades</legend>
		<table>
			<tr>
				<td>144" x 1.25" x 0.42" Lennox Blade</td>
				<td>$<span id="txtPrice6">25</span></td>
				<td>
					<select id="sel6">
						<option value="val0">0</option>
						<option value="val1">1</option>
						<option value="val2">2</option>
						<option value="val3">3</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>10 of 144" x 1.25" x 0.42" Lennox Blade</td>
				<td>$<span id="txtPrice7">225</span></td>
				<td>
					<select id="sel7">
						<option value="val0">0</option>
						<option value="val1">1</option>
						<option value="val2">2</option>
						<option value="val3">3</option>
					</select>
				</td>
			</tr>
		</table>
	</fieldset>
	
	<fieldset>
		<legend>Shipping</legend>
		<table>
			<tr>
				<td>Pick up - Port Perry, Ontario</td>
				<td>$<span id="txtPrice8">0</span></td>
				<td><input type="checkbox" id="chk8" /></td>
			</tr>
			<tr>
				<td>Ontario Flat Rate Shipping*</td>
				<td>$<span id="txtPrice9">249</span></td>
				<td><input type="checkbox" id="chk9" /></td>
			</tr>
			<tr>
				<td>Canada Wide Flat Rate Shipping*</td>
				<td>$<span id="txtPrice10">299</span></td>
				<td><input type="checkbox" id="chk10" /></td>
			</tr>
		</table>
	</fieldset>

	<fieldset>
		<legend>Final Quote</legend>
		<table>
			<tr>
				<td></td>
				<td></td>
				<td align="right">Sub Total:&nbsp;</td>
				<td>$<input type="text" id="txtTotal" size="8" /></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td align="right">Tax:&nbsp;</td>
				<td>$<input type="text" id="taxTotal" size="8" /></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td align="right">Grand Total:&nbsp;</td>
				<td>$<input type="text" id="grandTotal" size="8" /></td>
			</tr>
			</table>
	</fieldset>
	<input type="submit" name="submit" value="Submit" class="submit-button" />
</form>

[Kalon]

My JavaScript knowledge is still at the beginner level.

Did you write the code you posted or did you copy and paste it from somewhere?

The reason I ask is because if you wrote the code, I find it hard to believe you are still a beginner.

[tbsg]

Did you write the code you posted or did you copy and paste it from somewhere?

The reason I ask is because if you wrote the code, I find it hard to believe you are still a beginner.

Sorry, guess I want clear enough about that in my post. I definitely didn't write this. The code is from mredkj.com. I've contacted them directly but no .