Hi,
I’m just trying to find the best method of updating a running total of the value of list boxes. I basically have 6 items and I want a drop down box listing quantities. when a number is selected I want a total to update beneath.
I’m not sure I can do this in PHP without reloading the page. Do i need to use Java script? if so I’m a total newbie can someone point me in the right direction?
Thanks.
you will need to use Javascript to do this.
Here is a way to do it. I have added the individual item totals so that you can see how each changes. I have commented within the script so you should be able to follow the logic.
[HIGHLIGHT=“”]
<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Running Totals</title>
<script type=“text/javascript”>
<!–
function getTotals(selectObj)
{// check for invalid selection
if(selectObj.selectedIndex==0){return; }
// ---------
// process valid selection
// shorcut to selected index
var indx=selectObj.selectedIndex;
// shortcut to selected option object
var optionObj=selectObj.options[indx];
// get value
var itemTot=optionObj.value;
// decrement option value by 1
optionObj.value=itemTot-1;
// build ref to text box for colour total
var boxRef=optionObj.text.toLowerCase()+“Tot”;
// shortcut to colour text box
var boxObj=document.myForm[boxRef];
// change sub total
boxObj.value=optionObj.value;
// indicate changed box
boxObj.select();
// loop through all option values for grand total
var allTotals=new Number(); // make a number to avoid summing errors
for(var i=1; i<selectObj.options.length; i++)
{ allTotals+=parseInt(selectObj.options[i].value);
}
// update allTotals box
document.myForm.txtTotals.value=allTotals;
// reset selection so can select the same again if reqd.
document.myForm.mySelect.selectedIndex=0;
}
//–>
</script>
<style type=“text/css”>
<!–
body { font-family:arial, helvetica, sans-serif; color:#000080; font-weight:bold; font-size:12px; }
p { float:left; margin:10px; }
.m10 { margin:10px; }
–>
</style>
</head>
<body>
<div class=“m10”>
Select an item to remove from stock</div>
<form name=“myForm”>
<p><select name=“mySelect” onchange=“getTotals(this)”>
<option value=“0”>Select here …</option>
<option value=“100”>Red</option>
<option value=“200”>Green</option>
<option value=“300”>Blue</option>
</select></p>
<p>All totals: <input type=“text” name=“txtTotals” value=“600” size=“10”></p>
<p>Red totals: <input type=“text” name=“redTot” value=“100” size=“10”></p>
<p>Green totals: <input type=“text” name=“greenTot” value=“200” size=“10”></p>
<p>Blue totals: <input type=“text” name=“blueTot” value=“300” size=“10”></p>
</form>
<!-- end myForm –>
</body>
</html>