Check boxes in a calculator 2

Kirderf · Feb 5, 2005

Does anyone know of a way to use checkboxes correctly in a calculator form?

I want to have three or four different items that people can check and the checked items will be added together for a final value.

I'd gladly pay you on Thursday
for a hamburger today!

Kirderf · Feb 5, 2005

Here is my code If anyone can see what im doing wrong.
It puts in the value whether the boxes are checked or not.

Code:

<html>
<head>
<title>Calculator With Check Buttons</title>
</head>
<script language='javascript'>
function compute(frm){
   var total = eval(frm.Price1.value) + eval(frm.Price2.value) + eval(frm.Price3.value);
   frm.totalCost.value ="$" + parseInt(total, 10);
}

</script>
<body>
<form method="post">
  <p>&nbsp;</p>
  <p>Item1  
    <label>
    <input type="checkbox" name="Price1" value="15"> 
    $15</label>
  </p>
  <p>
      <label>Item 2</label>
    <label>
      
    <input type="checkbox" name="Price2" value="20"> 
    $20
    </label>
  </p>
  <p>
    <label>Item 3 </label>
    <label>
    <input name="Price3" type="checkbox" id="Price3" value="30">
$30 </label>
<br>
  </p>
  <p>TotalCost
     <input TYPE="text" NAME="totalCost" SIZE="10">
</p>
  <p>
    <input TYPE="button" VALUE="Compute Results" ONCLICK="compute(this.form)">
  </p>
</form>
</body>
</html>

I'd gladly pay you on Thursday
for a hamburger today!

coxellis · Feb 5, 2005

Here you go.

Andy

<html>
<head>
<title>Calculator With Check Buttons</title>
</head>
<script language='javascript'>
function compute(frm){
var total = 0;
if(frm.Price1.checked == true){total = total + Number(frm.Price1.value);}
if(frm.Price2.checked == true){total = total + Number(frm.Price2.value);}
if(frm.Price3.checked == true){total = total + Number(frm.Price3.value);}
frm.totalCost.value ="$" + parseInt(total, 10);
}

</script>
<body>
<form method="post">
<p> </p>
<p>Item1
<label>
<input type="checkbox" name="Price1" value="15">
$15</label>
</p>
<p>
<label>Item 2</label>
<label>

<input type="checkbox" name="Price2" value="20">
$20
</label>
</p>
<p>
<label>Item 3 </label>
<label>
<input name="Price3" type="checkbox" value="30">
$30 </label>
<br>
</p>
<p>TotalCost
<input TYPE="text" NAME="totalCost" SIZE="10">
</p>
<p>
<input TYPE="button" VALUE="Compute Results" ONCLICK="compute(this.form)">
<input type="reset" value="Reset">
</p>
</form>
</body>
</html>

Kirderf · Feb 5, 2005

That is exactly what I needed it to do!
So, you are using the "if" statement to check the status of the check boxes. I see. Okay! Thanks a ton Andy!

I'd gladly pay you on Thursday
for a hamburger today!

Veep · Feb 5, 2005

Or a little less typing:

Code:

function compute(frm){
var total = 0;   
for (var i = 0; i<frm.elements.length; i++)
{
        if ((frm.elements[i].name.indexOf('Price') > -1)) 
        {   
		  if(frm.elements[i].checked)
		  {
		     total += eval(frm.elements[i].value);
		  }
	    }
}

	frm.totalCost.value ="$" + parseInt(total);
}

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Check boxes in a calculator 2

Kirderf

Technical User

Kirderf

Technical User

coxellis

Programmer

Kirderf

Technical User

Veep

Programmer

Similar threads

Part and Inventory Search

Sponsor