Adding up values from drop down lists

Sicton

08-12-2004, 01:27 AM

Hi,

I know very little about Javascript but I was trying my luck in order to produce some code so that 5 drop down lists with values 1 - 5 could be selected and then be automatically added up with the total value displayed in an text input box below.

I thought I'd done everything correctly but it seems that rather than the values being added together, it simply displayed 1 number next to the other. Anyway, I'm sure there's someone who can help with this and I assume it's possible to get the desired effect. The code I came to a halt with is included below.

Any help is much appreciated.

Thanks

function doEcho()
{
var txt = echo.var1.value+echo.var2.value+echo.var3.value+echo.var4.value+echo.var5.value;
echo.display.value = txt;
}

</script>

<form name="echo">
<select name="var1" onChange="doEcho()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="var2" onChange="doEcho()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="var3" onChange="doEcho()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="var4" onChange="doEcho()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="var5" onChange="doEcho()">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>

<input type="text" name="display" onBlur="doEcho()" value="0" class="textfield" size="2" disabled>
</form>

glenngv

08-12-2004, 03:06 AM

The + symbol has two functions, addition and string concatenation. All the values of form controls are always string even if represented by numbers. So the solution is to convert each of them to numbers by using Number() or parseInt() methods.

[code]
<head>
<script type="text/javascript">
function doEcho(objForm)
{
var total=0;
for (var i=1;i<=5;i++){
objSelect = objForm.elements["var" + i];
total += Number(objSelect.options[objSelect.selectedIndex].value);
}
objForm.display.value = total;
}
</script>
</head>
<body>
<form name="echo">
<select name="var1" onChange="doEcho(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="var2" onChange="doEcho(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="var3" onChange="doEcho(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="var4" onChange="doEcho(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<select name="var5" onChange="doEcho(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select><br>

<input type="text" name="display" onBlur="doEcho(this.form)" value="0" class="textfield" size="2" disabled>
</form>
</body>

Sicton

08-12-2004, 03:23 AM

Thank you so very much glenngv, and thanks for the quick response - it's a fantastic help. I'm sure I'll get round to learning some javascript sooner or later!

Thanks again