Order form price calculator

  andyhuz 10:36 08 Apr 2004

Hello all

How would I go about enabling automatic price calculation on an order form ? For example, if a customer were to select 3 of a certain item, and 2 of another item, and just 1 of a third item, how can I get it to sub-total each individual item and then give a grand total at the bottom ?

I guess that it would be javascript of some kind or maybe there is a template I could use. I don`t need to have the form sent to me after it is totalled as it will be printed out and sent to me by the customer. It is just for the customers information.

T.I.A. Andy

  Taran 10:57 08 Apr 2004

click here

click here

I did these as examlpes some months ago for another forum member, who has since modified one of them to suit their requirements.

Either view the page source and save it or save the web page using the File, Save As option.

Don't as me why I called them quote1.html and quoteB.html. I must have had my 1s and Bs crossed that day ;o)

Anyway, although the second example has a submit button on it you would need to input your own form processing code. You could just as easily put a Print JavaScript code snippet in there and change the caption on the Submit button to Print.

They should give you some ideas though and adding extra items into the forms is fairly easy if you spend the time to read the underlying code. It's pretty straight forward.

Hope it helps.


  andyhuz 11:55 08 Apr 2004

Thanks very much for your prompt reply. It looks as though quoteB.html would be ideal for my purposes. How would I add a drop down box to be included in the calculation process i.e. is it possible to have a combination of single input boxes and drop down box(es).

T.I.A. Andy

p.s. I couldn`t seem to get quote1.html to calculate a total

  Taran 12:21 08 Apr 2004

The total cost box at the bottom of quote1.html autoupdates when you select an item from one or more of the drop downs above it.

Being JavaScript [and a rough example though I say it myself] it relies on a browser that can handle JavaScript properly and I can't guarantee that all browsers will react to it properly.

Internet Explorer copes with it perfectly on all of my systems but Mozilla Firefox does not.

This is one of the pitfalls of JavaScript.

JavaScript is processed clientside. That is, you download its code with the web page it is embedded into and your browser interprets it and tries to get it right. Most times it does, sometimes it doesn't.

Good coding goes some way to help but at the end of the day I don't know of any 100% foolproof JavaScript calculators that work on every browser, and you'll never get JavaScript to work at all unless your visitor has downloaded and installed Java support on their browser.

Because of this, PHP and/or ASP, if your host supports one or the other, offers a far safer way of running calculations that any browser will cope with, since both are processed by the web server and the results are sent as plain HMTL back to the browser.

If you look at the source code of the quoteB.html page, you should see that the form field names correspond to the JavaAScript above it. In plain English, the JavaScript calculation really says "value of Total = value of Price x value of Quantity", or Cost x Quantity = Total if you prefer the simplest way of looking at it.

Reading the source code should show you where the Total, Price and Quantity form field textboxes are named to correspond with the lines of calculation code (quantity1, total1, quantity2, total3, etc). Each line is calculated individually and then the main total is simply the sum of each subtotal above it.

Rather than me going off on one with a full tutorial, have you looked at Hotscripts.com where you can find all kinds of scripts in all kinds of languages.

For JavaScript:

click here

For PHP:

click here

For ASP:

click here

  andyhuz 19:02 08 Apr 2004

Thanks again for your reply. There`s plenty to go at there. I`ve still to work out how to totalise combined drop down box and single items. Any ideas ?


This thread is now locked and can not be replied to.

Elsewhere on IDG sites

iMac Pro review

Why this awful City of Los Angeles job ad for a graphic designer is actually brilliant

iMac Pro review

Les meilleures prises CPL (2018)