Forum Moderators: open
I have a form for taking customer details. Part of the form will allow the user to select some upgrades for their selected product. The upgrades will be displayed in a drop down list with their additional cost. The total cost of the product being ordered will be displayed on the foot of the page.
Could someone please advise me on the best way to automatically update the total cost displayed on the page each time an upgrade is selected? I am using PHP for the site but I'm assuming that javascript is needed for this.
I would think it would need something like this to begin with:
<select name="upgrades" onChange="">...
But I really have no idea how to use javascript to take the selected value and add it to the total cost.
Any ideas?
Many thanks :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
window.onload=function(){
var all_divs=document.getElementsByTagName('div');
var contnrs=new Array();
var con_cnt=0;
for(var i=0;i<all_divs.length;i++){
if(all_divs[i].className.indexOf('calc')!=-1){
contnrs[con_cnt]=all_divs[i];
con_cnt++;
}
}
for(var i=0;i<contnrs.length;i++){
contnrs[i].onkeyup=addEm;
var inp_arr=contnrs[i].getElementsByTagName('input'); //get inputs for adding
for(var n=0;n<inp_arr.length-1;n++){ //this loop adds auto click/select
inp_arr[n].onclick=function(){ //which causes a clicked field to be
this.select(); //automatically selected
}
}
}
}
function addEm(){
var inp_arr=this.getElementsByTagName('input');
var tot_var=0;
var arr_ndx=inp_arr.length-1;
for(var i=0;i<arr_ndx;i++){
isNaN(parseFloat(inp_arr[i].value))? tot_var+=0 : tot_var+=parseFloat(inp_arr[i].value);
}
inp_arr[arr_ndx].value=tot_var;
}
</script>
</head>
<body>
<form action="">
<div class="calc">
<input type="text" value="1" /><br />
<input type="text" value="2" /><br />
<input type="text" value="3" /><br />
<input type="text" disabled style="background:#eff;" />
</div>
</form>
<form action="">
<div class="calc">
<input type="text" value="1" /><br />
<input type="text" value="2" /><br />
<input type="text" value="3" /><br />
<input type="text" disabled style="background:#eff;" />
</div>
</form>
</body>
</html>
