Running totals (script) as customer selects items

@gatewrightsDec 08.2010

Hello, I’m new to the Forum here. I run a website (gatewrights.co.uk), we manufacture wooden gates etc.

We are trying to make the best possible shopping experience for our customers.

Objective: to give the customer a running total of what they’re about to order, before they add to basket (kind of a quick quote).

if you go to our test page: ~~[url]~~http://www.gatewrights.co.uk/page88.html[/url]

Someone on another forum has suggested a solution though it doesn’t seem to work, and they’ve not been back on to offer any further assistance. I wonder if someone could take a look and possibly point out any mistakes we’ve made.

Our site is made in Serif Webplus X4 and we use Romancart shopping cart. We have a form with drop-down boxes and radio buttons. The idea is to put a running total in the total box as the customer selects the various options before they proceed to the cart.

I’ll post the head js code and the body js code below.

I hope it is clear, and I thank you for your time so far.

Kind regards
Alan

to post a comment

JavaScript

15 Comments(s) _↴

@gatewrightsauthorDec 08.2010 — #javascript head code

[CODE]<script type="text/javascript" src="orderform04.js"></script>[/CODE]

orderform04.js contents

[CODE]function Cal(frm){
 var total=0;
 var sel=frm.itemname2;
 if (sel.selectedIndex>0){
 total+=sel.value.split('{')[1].split('W')[0]*1;
 }
 var sel=frm.itemname4;
 if (sel.selectedIndex>0){
 total+=sel.value.split('{')[1].split('W')[0]*1;
 }
 var sel=frm.itemname5;
 if (sel.selectedIndex>0){
 total+=sel.value.split('{')[1].split('W')[0]*1;
 }
 var sel=frm.itemname9;
 total+=sel.selectedIndex==0?100:200;
 var rads=frm.itemname6;
 for (var i=0; i<rads.length; i++)  {
 if (rads[i].checked&&rads[i].value){
 total+=rads[i].value.split('{')[1].split('W')[0]*1;
 }
 }
 
 frm.txtTotal.value='£'+total;
 }[/CODE]

@FangDec 08.2010 — #The onchange event must be in the <select> not the <option>

@gatewrightsauthorDec 08.2010 — #Thanks I'll have a look ?

@gatewrightsauthorDec 08.2010 — #Hi Fang,

I've tried your suggestion. Still doesn't work. I wasn't sure whether to change the onclick in the radio buttons or leave them the same. Can you advise. does the value field need to only have a number in it?

@FangDec 08.2010 — #Just change the dropdowns

This function will work better

[CODE]function Cal(frm){
 var needle=/{(d+)/; // get all numbers after '{' 
 var total=0;
 var sel=frm.itemname2;
 if (sel.selectedIndex>0){
 sel.value.match(needle);
 total+= +(RegExp.$1);
 }
 var sel=frm.itemname4;
 if (sel.selectedIndex>0){
 sel.value.match(needle);
 total+= +(RegExp.$1);
 }
 var sel=frm.itemname5;
 if (sel.selectedIndex>0){
 sel.value.match(needle);
 total+= +(RegExp.$1);
 }
 var sel=frm.itemname9;
 total+=sel.selectedIndex==0?100:200;
 var rads=frm.itemname6;
 for (var i=0; i<rads.length; i++)  {
 if (rads[i].checked&&rads[i].value){
 total+= +(sel.value.match(needle));
 }
 }
 
 document.getElementById('txtTotal').value=String.fromCharCode(163)+total.toFixed(2);
 }[/CODE]

@gatewrightsauthorDec 08.2010 — #Thanks Fang, that's certainly an improvement though it is doing something a little strange. Can we tell it to get the figures in between { } rather than just after {

I've no idea what I'm doing, and am very grateful for your help so far. ?

Regards

Alan

@FangDec 08.2010 — #It captures (green): '{[COLOR="Green"]123[/COLOR]}' or '{[COLOR="green"]123[/COLOR]W45}'

@gatewrightsauthorDec 08.2010 — #ok thanks. I must have done something wrong as it is doing something strange as I select various options (like making the clear treatment £147 instead of £47, and it ignores the top drop down box. Also it is ignoring the radio buttons.

Is there a way to make it combine the figures in {123w45} as the bit after the w is the shipping charge?

Thanks again, really appreciate this.

Alan

@FangDec 08.2010 — #

[CODE]function Cal(frm){
 var needle=/{(d+)W(d+)}/;
 var total=0;
 var sel=frm.itemname2;
 if (sel.selectedIndex>0){
 sel.value.match(needle);
 total+= +(RegExp.$1) + +(RegExp.$2); // inc. shipping
 }
 var sel=frm.itemname4;
 if (sel.selectedIndex>0){
 sel.value.match(needle);
 total+= +(RegExp.$1);
 }
 var sel=frm.itemname5;
 if (sel.selectedIndex>0){
 sel.value.match(needle);
 total+= +(RegExp.$1);
 }
 var sel=frm.itemname9;
 total+=sel.selectedIndex==0?100:200;
 var rads=frm.itemname6;
 for (var i=0; i<rads.length; i++)  {
 if (rads[i].checked&&rads[i].value){
 sel.value.match(needle);
 total+= +(RegExp.$1) + +(RegExp.$2); // inc. shipping
 }
 }
 
 document.getElementById('txtTotal').value=String.fromCharCode(163)+total.toFixed(2);
 }[/CODE]

Not all itemname6 radio's have a value

@gatewrightsauthorDec 09.2010 — #Hi Fang,

wow now we're really starting to get somewhere. Couple of issues:

1. when you select the gate (top drop-down box) it doesn't put a price in until you select another option as well.

2. when you select either 'treatment' or 'posts' it adds £100 to the price.

3. I think i've correctly added the values to the radio buttons, but it adds £100 instead of the entered value.

4. It doesn't seem to reset to zero if you select the 'please select' even though I've added {0W0}.

Unbelievably grateful for your continued help, thanks so much.

Kind regards

Alan

???

@FangDec 09.2010 — #1.

[CODE]    <option value="[COLOR="#0000ff"]{0W0}[/COLOR]">Please&nbsp;Select</option>
 <option value="[COLOR="#0000ff"]{537W0}[/COLOR]">1.8&nbsp;mts&nbsp;pair&nbsp;(0.9&nbsp;mt&nbsp;each&nbsp;gate)&nbsp;softwood&nbsp;-&nbsp;&#194;&#163;537</option>
 [/CODE]

[CODE]    <option value="None [COLOR="#0000ff"]{0}[/COLOR]">None</option>
 [/CODE]

[CODE]<option value="No posts [COLOR="#0000ff"]{0}[/COLOR]">None</option>
 [/CODE]

[CODE]<input id="radio_1012" name="itemname6" value="[COLOR="Blue"]{0W0}[/COLOR]" onclick="Cal(this.form);" type="radio">[/CODE]

4. Remove the if statements: [I]if (sel.selectedIndex>0){[/I]

[CODE]function Cal(frm){
 var cost = /{(d+[.d+]*)/;
 var cost_shiping = /{(d+[.d+]*)W(d+)}/;
 var total = 0;
 
 var sel=frm.itemname2;
 sel.value.match(cost_shiping);
 total+= +(RegExp.$1) + +(RegExp.$2);
 
 var sel=frm.itemname4;
 sel.value.match(cost);
 total+= +(RegExp.$1);
 
 var sel=frm.itemname5;
 sel.value.match(cost);
 total+= +(RegExp.$1);
 
 var sel=frm.itemname9;
 total+=sel.selectedIndex==0?100:200;
 
 var rads=frm.itemname6;
 for (var i=0; i<rads.length; i++)  {
 if (rads[i].checked&&rads[i].value){
 rads[i].value.match(cost_shiping);
 total+= +(RegExp.$1) + +(RegExp.$2);
 }
 }
 
 document.getElementById('txtTotal').value=String.fromCharCode(163)+total.toFixed(2);
 }[/CODE]

@gatewrightsauthorDec 09.2010 — #Thanks Fang.

I must being doing something wrong. It seems that in order for the cart to carry the details of the product, they must be included in the 'value' section.

For example: if I have only {537W0} in the value section (on the first drop-down) and add it to the cart it only brings over "Glemsford (Galvanised Ironwork) (remove)"

or if I have "{633W45} 2.4 mts pair (1.2 mt each gate) softwood" in the value then it does the same thing.

It seems the cart needs to have the {##W#} bit after the description i.e "2.4 mts pair (1.2 mt each gate) softwood {633W45}". Then it shows in the cart:

"Glemsford (1.8 mts pair (0.9 mt each gate) softwood , , , , Galvanised Ironwork) (remove)".

Also, it is still adding £100 to treatment and posts and is still also getting the radio button values wrong. Any thoughts.

Thanks

Alan

@FangDec 09.2010 — #It seems that in order for the cart to carry the details of the product, they must be included in the 'value' section.[/QUOTE]Yes, this is the way the html and script has been designed.

Also, it is still adding £100 to treatment and posts[/QUOTE]itemname9 adds that by default

The zipped html is included

[upl-file uuid=6f72d80e-ca62-49f6-8ce0-c90b0451beba size=4kB]page88.zip[/upl-file]

@gatewrightsauthorDec 09.2010 — #itemname9 adds that by default[/QUOTE]

is there a way around this? ?

@gatewrightsauthorDec 09.2010 — #I've gotta say, I think it's great how much you're helping me with this. So thanks again ?

Also in #JavaScript _↴

Write to new line in textarea?can any body help me in this javascript assignment [RESOLVED] Problem with textarea onchange event

Success!

Help @gatewrights spread the word by sharing this article on Twitter...

Tweet This

Running totals (script) as customer selects items

15 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Running totals (script) as customer selects items

15 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

15 Comments(s) _↴

Also in #JavaScript _↴