...

View Full Version : Why doesn't 'total' box work!?



tommo6210
10-14-2005, 08:26 AM
I am trying to develop a form where there are 3 drop down boxes, each with products to select.

The functionality I'm trying to achieve is:

If nothing is selected in dropdown box 1, then nothing can be selected in boxes 2 and 3. If nothing selected in box 2, then nothing can be selected in box 3.

I seem to have got this much working (see http://www.staylegal.net/html/test.php), however I am trying to ensure that a total value is calculated each time *any* of the 3 dropdown box selections are changed. For some reason the total calculation is only happening when the 3rd dropdown box is changed.

I believe there is something wrong in the following code:


function update(num)
{
eval('selected = document.CalcForm.menu' + num + '.selectedIndex;');
cost = fix(category[num].product[selected].price);
eval('document.CalcForm.price' + num + '.value = cost;');
var grand_total = 0;
var description = "";
var first = 1;
var tmp = 0;

for (i=1; i<category.length; i++)
{
eval('grand_total += parseFloat(document.CalcForm.price' + i + '.value);');
eval('selected = document.CalcForm.menu' + i + '.selectedIndex;');

if(category[i].product[selected].description != "No item selected" )
{
if(first == 1)
{
description = category[i].product[selected].description;
first = 2;
}
else
{
description = description + " + " + category[i].product[selected].description;
}
}
else
{
if(i != category.length)
tmp = i+1;
{
eval('document.CalcForm.menu' + tmp + '.selectedIndex = 0;');
eval('document.CalcForm.price' + tmp + '.value = fix(0.00);');
}
}
}

document.CalcForm.total.value = fix(grand_total);
document.BuyForm.amount.value = fix(grand_total);
document.BuyForm.desc.value = description;

Any help gratefully received.

Thanks,
Chris.

vwphillips
10-14-2005, 01:39 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (14-10-2005) http://www.vicsjavascripts.org.uk

function Cal(id1,id2,id3,idt){
Ary=new Array();
Ary[0]=document.getElementById(id1);
Ary[1]=document.getElementById(id2);
Ary[2]=document.getElementById(id3);
Ary[3]=document.getElementById(idt);
Ary[1].removeAttribute('disabled');
Ary[2].removeAttribute('disabled');
if (Ary[0].selectedIndex<1){
Ary[1].setAttribute('disabled','disabled');
Ary[1].selectedIndex=0;
}
if (Ary[1].selectedIndex<1){
Ary[2].setAttribute('disabled','disabled');
Ary[2].selectedIndex=0;
}
total=0;
for (i=0;i<Ary.length-1;i++){
total+=Ary[i].options[Ary[i].selectedIndex].value*1;
}
Ary[3].value=total.toFixed(2);
}
//-->
</script>
</head>

<body>
If nothing is selected in dropdown box 1,<br>
then nothing can be selected in boxes 2 and 3.<br>
If nothing selected in box 2,<br>
then nothing can be selected in box 3.<br>
<br>

<select id="S1" onchange="Cal('S1','S2','S3','Total');" >
<option value="0" >Select</option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
<option value="3" >Option 3</option>
</select>
<select id="S2" onchange="Cal('S1','S2','S3','Total');" disabled="disabled" >
<option value="0" >Select</option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
<option value="3" >Option 3</option>
</select>
<select id="S3" onchange="Cal('S1','S2','S3','Total');" disabled="disabled" >
<option value="0" >Select</option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
<option value="3" >Option 3</option>
</select>
<input id="Total" >
</body>

</html>

tommo6210
10-14-2005, 03:24 PM
Hi,

Thanks for that, but the functionality in disabling the dropdown boxes wasn't the problem... it was the fact that the total box didn't update when box 1 or 2 was changed (only updated when box 3 was changed)...

Regards,
Chris.

vwphillips
10-14-2005, 03:29 PM
the script I posted updates the total whatever select list is changed

Just too lazy to slog thought the script you posted when I thought there was an easier method.

tommo6210
10-14-2005, 05:04 PM
Hi,

Ok... with you now... I see what you're getting at.

Many thanks for your help.

Regards,
Chris.

tommo6210
10-14-2005, 06:06 PM
Sorry.... got it working now, but the original script also concatenated the text from the 3 selections as well (i.e. "Skeffingtons Port + Chablis 2001 + Chateau Haut"). I can't work out how to do this with your new code???

Chris.

vwphillips
10-14-2005, 07:53 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
// by Vic Phillips (14-10-2005) http://www.vicsjavascripts.org.uk

function Cal(id1,id2,id3,idt,idtxt){
Ary=new Array();
Ary[0]=document.getElementById(id1);
Ary[1]=document.getElementById(id2);
Ary[2]=document.getElementById(id3);
Ary[3]=document.getElementById(idt);
Ary[4]=document.getElementById(idtxt);
Ary[1].removeAttribute('disabled');
Ary[2].removeAttribute('disabled');
if (Ary[0].selectedIndex<1){
Ary[1].setAttribute('disabled','disabled');
Ary[1].selectedIndex=0;
}
if (Ary[1].selectedIndex<1){
Ary[2].setAttribute('disabled','disabled');
Ary[2].selectedIndex=0;
}
total=0;
txt='';
for (i=0;i<Ary.length-2;i++){
total+=Ary[i].options[Ary[i].selectedIndex].value*1;
if (Ary[i].selectedIndex>0){
txt+=Ary[i].options[Ary[i].selectedIndex].text;
}
}
Ary[3].value=total.toFixed(2);
Ary[4].value=txt;
}
//-->
</script>
</head>

<body>
If nothing is selected in dropdown box 1,<br>
then nothing can be selected in boxes 2 and 3.<br>
If nothing selected in box 2,<br>
then nothing can be selected in box 3.<br>
<br>

<select id="S1" onchange="Cal('S1','S2','S3','Total','Text');" >
<option value="0" >Select</option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
<option value="3" >Option 3</option>
</select>
<select id="S2" onchange="Cal('S1','S2','S3','Total','Text');" disabled="disabled" >
<option value="0" >Select</option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
<option value="3" >Option 3</option>
</select>
<select id="S3" onchange="Cal('S1','S2','S3','Total','Text');" disabled="disabled" >
<option value="0" >Select</option>
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
<option value="3" >Option 3</option>
</select>
<input id="Total" >
<input id="Text" size="20" >

Sorry.... got it working now, but the original script also concatenated the text from the 3 selections as well (i.e. "Skeffingtons Port + Chablis 2001 + Chateau Haut"). I can't work out how to do this with your new code???
</body>

</html>

tommo6210
10-15-2005, 01:41 PM
Excellent... all working perfectly now...

You're a star!

Many thanks,
Chris.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum