calcualtion using values in combobox

[someshbakliwal]

Hi,
I'll be grateful if anyone can help me with this query. I'm trying to create an online quote form. I have five combo boxes (combo1, combo2, combo3....) which are autoupdating on the basis of selection in the previous combo box. For each selection in the combo box there is some value attached to the selection. What I need is that as soon as the last combo box is selected, the HTML/script code should perform a calculation (basically multiply all the values) and display the result in a text box which has the readonly=true property. Code below is what I tried but nothing shows up in the text box names calc:

     function update()
{
 
 var*combo1*=*document.getElementById("combo1"); 
 var*combo2*=*document.getElementById("combo2");
 var*combo3*=*document.getElementById("combo3");
 var*combo4*=*document.getElementById("combo4");
 var*combodelivery*=*document.getElementById("combo1delivery");
 var*type*=*combo1.options[combo2.selectedIndex].value
 var*standard*=*combo1.options[combo3.selectedIndex].value
 var*level*=*combo1.options[combo1.selectedIndex].value
 var*delivery*=*combo1.options[combodelivery.selectedIndex].value
 var*length*=*combo1.options[combo4.selectedIndex].value
 
var total;
total = level * length * standard * type;
    calc.value="£ "+Math.round(total);
 
 
}

[someshbakliwal]

Hi,
I'll be grateful if anyone can help me with this query. I'm trying to create an online quote form. I have five combo boxes (combo1, combo2, combo3....) which are autoupdating on the basis of selection in the previous combo box. For each selection in the combo box there is some value attached to the selection. What I need is that as soon as the last combo box is selected, the HTML/script code should perform a calculation (basically multiply all the values) and display the result in a text box which has the readonly=true property. Code below is what I tried but nothing shows up in the text box names calc:

function update()
{
 
var*combo1*=*document.getElementById("combo1"); 
var*combo2*=*document.getElementById("combo2");
var*combo3*=*document.getElementById("combo3");
var*combo4*=*document.getElementById("combo4");
var*combodelivery*=*document.getElementById("combo1delivery");
var*type*=*combo1.options[combo2.selectedIndex].value
var*standard*=*combo1.options[combo3.selectedIndex].value
var*level*=*combo1.options[combo1.selectedIndex].value
var*delivery*=*combo1.options[combodelivery.selectedIndex].value
var*length*=*combo1.options[combo4.selectedIndex].value
 
var total;
total = level * length * standard * type;
calc.value="£ "+Math.round(total);
 
 
}

[acoder]

Not sure what all those *s are doing in your code in place of what should be spaces. Replace them with spaces first of all. If you look in your error console, you may see an error relating to the line which sets calc. You need to first get calc using document.getElementById() as you did with the combo boxes. Finally, the values are strings. To convert them to integers, use parseInt.

[someshbakliwal]

There are no stars in the actual code. I'm not sure why it is showing here. As for the value: suppose the code is for one value in combo box (name combodelivery) is:
<select name="combodelivery" id="combo_del" onChange="change(this);" style="width:312;height:312">
<option value="delivery">Delivery requirement </option>
<option value="1">Standard: 15 days </option>
<option value="1.25">Express: 10 days</option>
<option value="1.5">Speedy: 7 days</option>
<option value="2">Next day</option>
<option value="2.5">Same day</option>

Wont I set delivery=1 using this code:
var*delivery*=*combo1.options[combodelivery.selectedIndex].value
if the person has selcted the 'Standard:15 day' delivery option?

[someshbakliwal]

Just to solve the confusion. My code in frontpage is not showing any stars. But when I copy the code on this website, spaces are replaced by asterisks. I'm not sure why it is happening. The code works upto autopopulating combo boxes but nothing happens after the last combo box is autopopulated and selected.

[acoder]

3 things:

1. The variables on line 16 should be wrapped in parseFloat()s because the values are floats
2. calc.value on line 17 should be document.getElementById("calc").value
3. Why are you mixing the combo box and the selected index, e.g. you're getting the value of combo1, but using the selected index of combo delivery - is that what you meant to do?

[someshbakliwal]

Hi,
No this is not what I want. I'll tell you exactly what the code does. I select the first combo box which has options A, B, C, D. All four of these have a value of their own so A means 100, B means 50 and so on. Once the user selects an option the second combo box gets populated (depending on the choice made in the first combo box) with options say E,F,G,H. Again these options have some value. This cycle is repeated to get two more combo boxes with some value attached to their options as well. What I'm trying to do is that as soon as I select the fourth combo box, the readonly text box below the fourth combo box should display value x where x is simply the multiplication of the values attached to the options selected in the four combo boxes. Forget about autopopulating; what shall we do to capture the four selections, read the values attached to these options, calculate x and display it immediately after selection of the fourth combo box?
I am not sure what I am doing wrong. I know nothing about Javascript or in fact any script. I did web development in asp and HTML but some 5-6 years ago and have forgotten most of it. I understand coding a bit but I cant get this to work. Please help. Thanks in anticipation.

[acoder]

So, the first two points still apply and so does the third. In your update() function, look at lines 9-13. They should be as follows:

var type = combo2.options[combo2.selectedIndex].value;
var standard = combo3.options[combo3.selectedIndex].value;
var level = combo1.options[combo1.selectedIndex].value;
var delivery = combodelivery.options[combodelivery.selectedIndex].value;
var length = combo4.options[combo4.selectedIndex].value;

Notice how I've changed the names. You can also just use the value property of the select element directly:

var type = combo2.value;