Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Order Form Totals Script - Help Please

    Hi All, my first post on CodingForums

    I'm a javascript novice so looking for some help

    I'm using a handy little script from here:

    http://www.mredkj.com/javascript/orderform.html

    On an order form here:

    http://www.bluecoast.co.uk/test/order/form.php

    I've searched the net for hours and had a pop myself but I can't figure it out and it's driving me crazy

    Couple of things I'm after:

    1. Need the "total price" to duplicate at the bottom of the form
    2. Need exactly half the "total price" to show in both the deposit fields next to the total prices

    Hopefully that makes sense, can anybody give me a hand?

    Thanks in advance!
    Craig

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,310
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    We cannot help you unless you post your Javascript code.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Ah sorry Philip

    An update on the situation since the original post:

    It's not ideal and a bit of a 'bodge' but I've managed to acheive the desired effect using the following 2 jquery scripts:

    Code:
    <script type="text/javascript">
    $(document).ready(function(){
        $('#frmOrder').click(function(){
            $('#txtTotal3 , #txtTotal4').text($('#txtTotal').val() / 2);
        });    
    });
    </script>
    <script type="text/javascript">
    $(document).ready(function(){
        $('#frmOrder').click(function(){
            $('#txtTotal2').text($('#txtTotal').val());
        });    
    });
    </script>
    However I've now hit another snag in that the "click" function doesn't trigger off 'select options', meaning the deposit totals don't update until you click elsewhere on the form which isn't ideal

    Any ideas?

    Original code is as follows:

    JAVASCRIPT:

    Code:
    // mredkj.com
    // OrderForm.js - v0.4
    // v0.4 - 2007-02-01
    // v0.3 - 2006-04-09
    // v0.2 - 2006-04-08
    // v0.1 - 2006-04-06
    
    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);
    	
    }
    Thanks

  • #4
    New Coder
    Join Date
    Jul 2011
    Posts
    27
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Don't worry

    Cracked it. Turns out i needed to use a combination of click and change events as chrome and safari dont support click for select options

    thanks anyway


  •  

    Posting Permissions

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