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.

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

Code:

<!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

Code:

<!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>

Thread: Calculating form

Thread Tools

Search Thread

Calculating form

Similar Threads

Calculating form

Auto calculating form?

Need help with a auto calculating form

Need help with a auto calculating form

calculating dates in PHP

Bookmarks

Bookmarks

Posting Permissions