SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    port perry, ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Adding tax to sub-totals onchange

    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):

    Code:
    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:

    Code:
    <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>

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tbsg View Post
    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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2004
    Location
    port perry, ontario
    Posts
    88
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    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 .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •