Javascript to sum drop down values

[rdubill357341]

I have a need to be able to have a visitor make selections from several drop down lists and show a running total on the page of the values of the items they selected.

I downloaded a script that nicely does this for checkboxes they check...

here is a sample of my drop down list:

<select name="Cards">
<option value="100.00">EVGA</option>
<option value="200.00">ASUS</option>
</select>

If the visitor selects EVGA add $100.00 to the total and display - and so on...

Suggestions?

thank you in advance...

[Ray Borduin]

What part of the javascript are you missing?

How to call a function on change?

<select onchange="functionName()">

How to refer to a list?

document.getElementById('listName')

How to refer to a selected value in a list?

list.options[list.selectedIndex].value

How to refer to a layer?

document.getElementById('layerName')

How to set the contents of that layer?

layerName.innerHTML = "$" + totalInDollars + ".00"

[rdubill357341]

Ray - I have downloaded a simple javascript that adds up the values for multiple checkboxes on a page if the visitor checks the boxes - this works fine - and it displays the total on the same page...

Here is the function, script and HTML:

<script type="text/javascript" src="autoSumCheckboxes.js"></script>
function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=0; i<29; i++) {
gn = 'prod'+i;
elem = document.getElementById(gn);
if (elem.checked == true) { sum += Number(elem.value) }
}
document.getElementById('totalcost').value = sum.toFixed(2);
}

<td><input type="checkbox" id='prod1' value="425.00" onclick="UpdateCost()" />
$ 425.00</td>
</tr>
<tr>
<td>T-5208-34M or L</td>
<td colspan="2">Helmet Impact Liner, medium or large</td>
<td><input type="checkbox" id='prod2' value="245.00" onclick="UpdateCost()" />
$ 245.00</td>



I now need to set up a drop down (select list) that will do the same for the values in the select list..


This does not work and the total field is blank:

<td width="169"><form id="form1" name="form1" method="post" action="">
<label>
<select name="joe" id="prod0" onchange="MM_callJS('UpdateCost()')">
<option>select</option>
<option value="100.00">one</option>
<option value="200.00">two</option>
</select>
</label>
</form></td>

I'm sure the function and select list has to change but I've tried several times - no luck...

Suggestions?

thanks in advance....

[Ray Borduin]

Use the firefox error console to debug your javascript. This is relatively simple, so it shouldn't be too hard to debug once you can track what is going wrong with something like the firefox error console.

[rdubill357341]

Ray - I'm close but one problem remains:

Here's my HTML:

<input type="text" id="totalcost" value="" />
<label>
<select name="prod0" id="prod0" onchange="MM_callJS('UpdateCost()')" >
<option>select</option>
<option value="100.00">one</option>
<option value="200.00">two</option>
</select>
</label>




The script:

function UpdateCost() {
var sum = 0;
var gn, elem;
for (i=0; i<29; i++) {
gn = 'prod'+i;
var dropdownIndex = document.getElementById(gn).selectedIndex;
var dropdownValue = document.getElementById(gn)[dropdownIndex].value;
{ sum += Number(dropdownValue); }
}
document.write('totalcost').value = sum.toFixed(2);
}


The values are being selected correctly - I verified that by testing a document.write statement and 'dropdown value' displays with the correct value...

The last statement in the script does not display the 'totalcost'...

Are the values not being 'summed' correctly from the drop down list?

Is the document.write statement for totalcost not correct?

Is the sum of the values not being added to totalcost?

Any help you can provide is much appreciated - this is the last item for this project I need to get working before publishing...

[Ray Borduin]

add a layer to the page where you want to display the cost like:

<div id="mytotal"></div>

Then in your code use:
document.getElementById("mytotal").innerHTML = sum.toFixed(2);