View Full Version : Combining two or more text drop down boxes to calculate a price

12-13-2011, 11:53 AM
Hi all, I'm very new to Javascript and wonder if someone can help me.

I'm creating an online enrolment form for my company, who are a training company. Users enrolling on the course must make three choices - The level of course, the size of course and whether they wish to attend a workshop or study by distance learning. The combination of these three factors will determine the price. I'd like to have the price automatically calculated using javascript and displayed on the form before they submit. Can anyone give me an idea of how to do this?

There are three drop down boxes for users to select their course. They are: -

Level of Qualification:
Level 3
Level 4
Level 5
Level 6

Scale of Qualification:

Preferred Delivery Method
Distance Learning

Each possible combination of these will affect the price. So for instance, if the user were to select 'Level 4', 'Certificate' and 'Workshop' the price would be calculated based on these three options.

How can I calculate the ultimate price and then display it on the page (I was thinking of using innerHTML in a 'span' element to display the final value, but if anyone has any better ideas I'd be glad to hear them)

The HTML code for the drop down boxes is below:

<form action="enrolment.php" method="post">

<select name="level" class="input" id="level">

<option value="chooselevel"></option>
<option value="Level 3">Level 3</option>
<option value="Level 4">Level 4</option>
<option value="Level 5">Level 5</option>
<option value="Level 6">Level 6</option>


<select name="size" class="input" id="size">

<option value="choosesize"></option>
<option value="Award">Award</option>
<option value="Certificate">Certificate</option>
<option value="Diploma">Diploma</option>


<select name="delivery" class="input" id="deliv">

<option value="deliverymethod"></option>
<option value="Workshop">Workshop</option>
<option value="Distance Learning">Distance Learning</option>



Thanks all, hope someone here can help!



*EDIT: I should mention that the form is also inside a table - Not sure if that will make a difference.

12-13-2011, 02:12 PM
Having worked on this a bit more, I think I've solved the first part of the puzzle - getting the browser to react to changes in the drop down boxes. Quite a long winded solution using nested 'if..else' statements, but it seems to be working well. At the moment I'm just using alert boxes to notify me that the browser is recognising the changes correctly.

So now I just need to make it so that the price is displayed and changes dynamically in response to changes in the drop down boxes. Any ideas would be welcome, and if I figure it out myself I'll post the code up here for other people if they need it!

12-13-2011, 02:39 PM
I don't know how much yuor code has changed since you posted the original, but there are two things that you might find useful:

- the value of your options can be different from the text, so you can put the price (or anything else) directly in there
- each select box can have an onchange which will fire a function when a option is chosen. you can use this function to do your caluculations.

so bearing those in mind, your select boxes may be more useful if they look something like this:

<select name="level" class="input" id="level" onchange="calculate()">

<option value="chooselevel"></option>
<option value="20">Level 3</option>
<option value="30">Level 4</option>
<option value="40">Level 5</option>
<option value="50">Level 6</option>


hope that helps