Log in

View Full Version : Calculating form


gemzilla
09-03-2012, 03:17 PM
Hi,

I am working on a form, which when you check a box with a given value will display the number. This part works.

However there are multiple check boxes and I would like it so if 2 boxes or more are checked it will add the two values up and display it. Currently all it does is display the highest value in a selection.

At the moment this is my Java Script Code.



var bathroom_prices = new Array();
bathroom_prices["wc"]=100;
bathroom_prices["washbasin"]=150;
bathroom_prices["bath"]=200;
bathroom_prices["shower"]=250;
bathroom_prices["bidet"]=300;
bathroom_prices["tiling"]=350;
bathroom_prices["disabled"]=50;
bathroom_prices["bathroom"]=-50;



function getbathroomprice()
{
var bathroomprice=0;

var theForm = document.forms["bathroom"];

var stuff = theForm.elements["stuff"];

for(var i = 0; i < stuff.length; i++)
{

if(stuff[i].checked)
{

bathroomprice = bathroom_prices[stuff[i].value];

break;
}
}

return bathroomprice;
}




function calculateTotal()
{

var totalbathroomprice = getbathroomprice();


var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the bathroom £"+totalbathroomprice;

}

function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}
vwphillips
09-03-2012, 04:29 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/
var bathroom_prices = [
["wc",100],
["washbasin",150],
["bath",200],
["shower",250],
["bidet",300],
["tiling",350],
["disabled",50],
["bathroom",-50]
];


function getbathroomprice()
{
var bathroomprice=0;

var theForm = document.forms["bathroom"];


for(var cb,i = 0; i < bathroom_prices.length; i++){
cb=bathroom_prices[i];
if(theForm[cb[0]]&&theForm[cb[0]].checked){

bathroomprice += cb[1];

}
}

return bathroomprice;
}




function calculateTotal()
{

var totalbathroomprice = getbathroomprice();


var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the bathroom £"+totalbathroomprice;

}

function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}



/*]]>*/
</script></head>

<body>
<form name="bathroom" >
<input type="checkbox" name="wc" value="100" />
<input type="checkbox" name="washbasin" value="150" />
<input type="checkbox" name="bath" value="200" />
<input type="checkbox" name="shower" value="250" />
<input type="checkbox" name="bidet" value="300" />
<input type="checkbox" name="tiling" value="350" />
<input type="checkbox" name="disabled" value="50" />
<input type="checkbox" name="bathroom" value="-50" />
<input type="button" name="" value="Test" onmouseup="calculateTotal()"/>
<div id="totalPrice" /></div>
</form>
</body>

</html>

or


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<script type="text/javascript">
/*<![CDATA[*/


function getbathroomprice()
{
var bathroomprice=0;

var theForm = document.forms["bathroom"];
var cbs=theForm['stuff'];

for(var i = 0; i < cbs.length; i++){
if(cbs[i].checked){

bathroomprice += cbs[i].value*1;

}
}

return bathroomprice;
}




function calculateTotal()
{

var totalbathroomprice = getbathroomprice();


var divobj = document.getElementById('totalPrice');
divobj.style.display='block';
divobj.innerHTML = "Total Price For the bathroom £"+totalbathroomprice;

}

function hideTotal()
{
var divobj = document.getElementById('totalPrice');
divobj.style.display='none';
}



/*]]>*/
</script></head>

<body>
<form name="bathroom" >
<input type="checkbox" name="stuff" value="100" />
<input type="checkbox" name="stuff" value="150" />
<input type="checkbox" name="stuff" value="200" />
<input type="checkbox" name="stuff" value="250" />
<input type="checkbox" name="stuff" value="300" />
<input type="checkbox" name="stuff" value="350" />
<input type="checkbox" name="stuff" value="50" />
<input type="checkbox" name="stuff" value="-50" />
<input type="button" name="" value="Test" onmouseup="calculateTotal()"/>
<div id="totalPrice" /></div>
</form>
</body>

</html>