calculating total on the fly [Archive]

Click to See Complete Forum and Search --> : calculating total on the fly

LuigiX

11-15-2003, 01:55 PM

Hi

I have the following code that calculates the sum of each item based on the number selected in the combo boxes.

I would like the total of all the sums to be calculated and displayed in the "total" field.

Cheers

Luigi

<html>
<head>
<script language="javascript">

function show( what ) {
if ( document.getElementById( 'b' + what ).style.visibility == "hidden" ) {
document.getElementById( 'b' + what ).style.visibility = "";
} else {
document.getElementById( 'b' + what ).style.visibility = "hidden";
}
calc( what );
}

function calc( what ) {
var szValue;
var oSelect = document.getElementById( 'b' + what );
if ( oSelect.style.visibility == "hidden" ) {
szValue = "";
} else {
var fPrice = parseFloat( document.getElementById( 'c' + what ).childNodes[ 0 ].data );
var fMenge = oSelect.options[ oSelect.selectedIndex ].value;
szValue = " $" + (fPrice * fMenge).toFixed( 2 );
}
var oTextNode = document.createTextNode( szValue );
var oParent = document.getElementById( 'd' + what );
oParent.replaceChild( oTextNode, oParent.childNodes[ 0 ] );
}

</script>
</head>
<body>
<form id="order" action="order.htm">
<table summary="orderform" height="99">
<tr><td height="1">
article <input type="checkbox" id="a1" name="article" onclick="show('1');" />
</td><td height="1">
<select id="b1" style="visibility:hidden" name="mode" onchange="calc( '1' );">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
</td><td id="c1" height="1">
12.50 Euro
</td><td id="d1" height="1"><span></span>
</td></tr>
<tr><td height="21">
poota <input type="checkbox" id="a2" name="article1" onclick="show('2');" />
</td><td height="21">
<select id="b2" style="visibility:hidden" name="D1" onchange="calc( '2' );">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
</td><td id="c2" height="1">
15.00 Euro
</td><td id="d2" height="1"><span></span>
</td></tr>
<tr><td height="21">
</td><td height="21">
total
</td><td id="c1" height="21">
<input type="text" name="total" size="8">
</td><td id="d1" height="21">
</td></tr>
</table>
</form>
</body>
</html>

Pittimann

11-16-2003, 05:01 AM

Hi LuigiX!

The stuff will work like that:

<html>
<head>
<script language="javascript">
function show( what ){
if ( document.getElementById( 'b' + what ).style.visibility == "hidden" ) {
document.getElementById( 'b' + what ).style.visibility = "";
}
else {
document.getElementById( 'b' + what ).style.visibility = "hidden";
}
calc( what );
}
function calc( what ) {
var szValue;
var oSelect = document.getElementById( 'b' + what );
if ( oSelect.style.visibility == "hidden" ) {
szValue = "";
}
else {
var fPrice = parseFloat( document.getElementById( 'c' + what ).childNodes[ 0 ].data );
var fMenge = oSelect.options[ oSelect.selectedIndex ].value;
szValue ="$ "+(fPrice * fMenge).toFixed( 2 );
}
var oTextNode = document.createTextNode( szValue );
var oParent = document.getElementById( 'd' + what );
oParent.replaceChild( oTextNode, oParent.childNodes[ 0 ] );
calctotal();
}
var HowManyItems=2//number of different articles;
itemval= new Array();
function calctotal(){
var totval=0;
for (i = 1; i <= HowManyItems; i++) {
if ( document.getElementById( 'b'+i ).style.visibility == "hidden" ) itemval[i]=0;
else itemval[i]=parseFloat( document.getElementById( 'c'+i ).childNodes[ 0 ].data );
itemval[i] = itemval[i]*document.getElementById( 'E'+i ).value;
if (itemval[i]>0) totval +=itemval[i];
else totval=totval;
}
totval=totval.toFixed( 2 )
document.forms.order.total.value ="$ "+totval;
}
</script>
</head>
<body>
<form id="order" action="order.htm">
<table summary="orderform" height="99">
<tr><td height="1">
article <input type="checkbox" id="a1" name="article" onclick="show('1');" />
</td><td height="1">
<select id="b1" style="visibility:hidden" name="E1" onchange="calc( '1' );">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
</td><td id="c1" height="1">
12.50 Euro
</td><td id="d1" height="1"><span></span>
</td></tr>
<tr><td height="21">
poota <input type="checkbox" id="a2" name="article1" onclick="show('2');" />
</td><td height="21">
<select id="b2" style="visibility:hidden" name="E2" onchange="calc( '2' );">
<option value="1"> 1 </option>
<option value="2"> 2 </option>
</select>
</td><td id="c2" height="1">
15.00 Euro
</td><td id="d2" height="1"><span></span>
</td></tr>
<tr><td height="21">
</td><td height="21">
total
</td><td id="c1" height="21">
<input type="text" name="total" size="8">
</td><td id="d1" height="21">
</td></tr>
</table>
</form>
</body>
</html>

Please note that I changed the names of the selects in order to make the loop I added work for different numbers of articles to be sold (without damaging the replaceChild-part of your calc()-function)...

I am wondering a bit, that your prices are in Euro but you make the "$"-symbol appear when a checkbox is checked :p

Anyway, for the script it is of no relevance and I left it like that...

Cheers - Pit

LuigiX

11-16-2003, 11:54 AM

Thanks Pit

Just what I'm after

Cheers

Lugi