...

View Full Version : Order Form Totals Script - Help Please



ThatBloke
07-31-2011, 05:09 PM
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

Philip M
07-31-2011, 07:46 PM
We cannot help you unless you post your Javascript code.

ThatBloke
07-31-2011, 08:36 PM
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:



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



// 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

ThatBloke
07-31-2011, 09:11 PM
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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum