# Calculate form total

• Apr 4, 2013, 13:04
bcalagoure
Calculate form total
I'm working on a registration form (I'll be the only user). The idea is to select which fee is appropriate (Single / Couple / Student), add child fee (if any) and have the total appear in a text box. The first part is working, thanks to a code snippet I found online, but I can't figure out how to add in the fee for children. Here's the code. Any help gratefully appreciated. :)
HTML Code:

``` <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Registration Form</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> <!--// function total(){   var form = document.forms['myform'];   for(var i=0; i<form.elements.length; i++){     if(form.elements[i].type.match(/(checkbox|radio)/i)){       form.elements[i].onclick = function(){         for(var i=0,total=0; i<this.form.elements.length; i++){           var input = this.form.elements[i];           if(input.type.match(/(checkbox|radio)/i) && input.checked){             total += input.value/1;           }                   this.form.total.value = total.toFixed(2);         }     }   }   form.onsubmit = function(){     for(var i=0; i<this.elements.length; i++){     var input = this.elements[i];       if(input.type.match(/(radio)/i)){         input.value = input.id+'/'+input.value;       }     }   } } } window.onload = total; </script> </head> <body> <form action="<?php echo \$editFormAction; ?>" method="POST" name="myform">   <h1>Registration</h1> <input type="radio" name="fee" id="Adult" value=55.00> Adult \$55 <br> <input type="radio" name="fee" id="Couple" value=95.00> Couple \$95 <br> <input type="radio" name="fee" id="Student" value=25.00> Student \$25<br><br> Number of Children: <input name="childnum" type="text" id="Children" value="" size="3"> &nbsp;&nbsp; Cost: \$&nbsp;<input name="fee" type="text" id="childfee" value="0" size="8"><br>         (\$10 per child to cover cost of lunch)<br>                         <h3>Cost</h3>           Total: <input name="total" id="total" type="text" onFocus="this.blur();" size="8" readonly>                   Paid: \$<input name="amountpaid" id="amountpaid" type="text" size="8">                                     <br><br>         <input name="Submit" type="submit" class="button"  value="Register"></td> </form> </body> </html>```
• Apr 4, 2013, 15:35
Pullo
Hi there,

This should do the trick:

Code:

```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   <html>   <head>     <title>Registration Form</title>     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">   </head>     <body>     <form action="<?php echo \$editFormAction; ?>" method="POST" name="myform">       <h1>Registration</h1>       <input type="radio" name="fee" id="Adult" value=55.00> Adult \$55 <br>       <input type="radio" name="fee" id="Couple" value=95.00> Couple \$95 <br>       <input type="radio" name="fee" id="Student" value=25.00> Student \$25<br><br>             Number of Children: <input name="childnum" type="text" id="Children" value="" size="3">       &nbsp;&nbsp; Cost: \$&nbsp;<input name="fee" type="text" id="childfee" value="0" size="8"><br>       (\$10 per child to cover cost of lunch)<br>             <h3>Cost</h3>       Total: <input name="total" id="total" type="text" onFocus="this.blur();" size="8" readonly>       Paid: \$<input name="amountpaid" id="amountpaid" type="text" size="8">             <br><br>       <input name="Submit" type="submit" class="button"  value="Register"></td>     </form>         <script type="text/javascript">       var form = document.forms['myform'];       var adultTotal = 0;       var kidsTotal = 0;             function updateTotal(tot1, tot2){         form.total.value = (adultTotal + kidsTotal).toFixed(2);       }             for(var i=0; i<form.elements.length; i++){         if(form.elements[i].type.match(/(checkbox|radio)/i)){           form.elements[i].onclick = function(){             for(var i=0,total=0; i<this.form.elements.length; i++){               var input = this.form.elements[i];               if(input.type.match(/(checkbox|radio)/i) && input.checked){                 adultTotal = input.value/1;               }               updateTotal();             }           }         }       }             form.Children.onkeyup = function(){         form.childfee.value = form.Children.value*10;         kidsTotal = Number(form.childfee.value);         updateTotal();       }             form.onsubmit = function(){         for(var i=0; i<this.elements.length; i++){           var input = this.elements[i];           if(input.type.match(/(radio)/i)){             input.value = input.id+'/'+input.value;           }         }       }     </script>   </body> </html>```
Any questions, just let me know.
• Apr 4, 2013, 16:04
bcalagoure
That works a treat, thanks :D
Just wondering why you put the code on the bottom?
• Apr 5, 2013, 05:23
Pullo
No problem :)

The reason is that I put the code at the bottom, is that otherwise it would run before any of the elements it attempts to reference exist on the page.

The reason that it worked at the top of the page for you, was that you had everything wrapped in a call to window.onload().
• Apr 8, 2013, 04:54
bcalagoure
Pullo, I'm calling on you again. The code you gave me worked very well until recently. I added a section to record method of payment and now when I select MoP the Total field shows NaN. I'm assuming it's because the code is checking values of radio elements to include in the total, but I don't know how to fix it. Here's the code.
HTML Code:

```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   <html>   <head>     <title>Registration Form</title>     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">   </head>     <body>   <form action="<?php echo \$editFormAction; ?>" method="POST" name="myform">       <h1>Registration</h1>       <input type="radio" name="fee" id="Adult" value=55.00> Adult \$55 <br>       <input type="radio" name="fee" id="Couple" value=95.00> Couple \$95 <br>       <input type="radio" name="fee" id="Student" value=25.00> Student \$25<br><br>             Number of Children: <input name="childnum" type="text" id="Children" value="" size="3">       &nbsp;&nbsp; Cost: \$&nbsp;<input name="fee" type="text" id="childfee" value="0" size="8"><br>       (\$10 per child to cover cost of lunch)<br>             <h3>Cost</h3>       Total: <input name="total" id="total" type="text" onFocus="this.blur();" size="8" readonly>       Paid: \$<input name="amountpaid" id="amountpaid" type="text" size="8">             <br><br>           <h3>Method of payment:</h3>                   <label>Cheque<input type="radio" name="method_pymt" id="method_pymt" value="Cheque"></label>                   <label>Cash<input type="radio" name="method_pymt" id="method_pymt" value="Cash"></label>           <label>Money Order<input type="radio" name="method_pymt" id="method_pymt" value="Money Order"></label>  <br><br>       <input name="Submit" type="submit" class="button"  value="Register"></td>     </form>         <script type="text/javascript">       var form = document.forms['myform'];       var adultTotal = 0;       var kidsTotal = 0;             function updateTotal(tot1, tot2){         form.total.value = (adultTotal + kidsTotal).toFixed(2);       }             for(var i=0; i<form.elements.length; i++){         if(form.elements[i].type.match(/(checkbox|radio)/i)){           form.elements[i].onclick = function(){             for(var i=0,total=0; i<this.form.elements.length; i++){               var input = this.form.elements[i];               if(input.type.match(/(checkbox|radio)/i) && input.checked){                 adultTotal = input.value/1;               }               updateTotal();             }           }         }       }             form.Children.onkeyup = function(){         form.childfee.value = form.Children.value*10;         kidsTotal = Number(form.childfee.value);         updateTotal();       }             form.onsubmit = function(){         for(var i=0; i<this.elements.length; i++){           var input = this.elements[i];           if(input.type.match(/(radio)/i)){             input.value = input.id+'/'+input.value;           }         }       }     </script>   </body> </html>```
• Apr 8, 2013, 04:59
Pullo
Hi there,

The problem is that the code you started with is recalculating the total every time any radio button or checkbox changes.

Just limit the recalculation to the radio buttons with the name of "fee"

Change this:

Code JavaScript:

```if(input.type.match(/(checkbox|radio)/i) && input.checked){ adultTotal = input.value/1; }```
To this:

Code JavaScript:

```if(input.name.match(/fee/i) && input.checked){ adultTotal = input.value/1; }```

And all will be good.
• Apr 8, 2013, 05:21
bcalagoure
Thank you again :)
• Apr 14, 2013, 17:25
Shnuk
Hello, thank you so much for this thread. i have been searching way too long to find this. Could you please help me? I am wanting to do this exact form but i would need another "Number of Children" section. I would greatly appreciate your help.

• Apr 14, 2013, 23:22
Pullo
Hi there Shnuk,

Welcome to the forums :)

Having two "Number of Children" fields, doesn't make much sense.
Do you mean a second text field whose value is also added to the total?

Why don't you post your HTML and I can help you hook it up to the JavaScript.
• Apr 15, 2013, 08:12
Shnuk
Hi, thank you for your reply. This is my "code" edited from your version. I would ideally like for there to be another two more text fields that will add to the total. They would be: Number of Subs and Number of Mics.

Also, (i know this is very simple but i am completely new) could i make all of the writing bold?

Thanks again :)
• Apr 15, 2013, 08:13
Shnuk
Code JavaScript:

```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Custom Calculator</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>   <body> <form action="<?php echo €editFormAction; ?>" method="POST" name="myform"> <h1>Custom Calculator</h1> <input type="radio" name="fee" id="Adult" value=00.00> No Mixer <br> <input type="radio" name="fee" id="Couple" value=10.00> Small Mixer €10 <br> <input type="radio" name="fee" id="Student" value=50.00> X32 Digital Mixer €50<br><br>   Number of Tops: <input name="childnum" type="text" id="Children" value="" size="3"> &nbsp;&nbsp; Cost: €&nbsp;<input name="fee" type="text" id="childfee" value="0" size="8"><br>     <h3>Cost</h3> Total € <input name="total" id="total" type="text" onFocus="this.blur();" size="8" readonly>     </td> </form>   <script type="text/javascript"> var form = document.forms['myform']; var adultTotal = 0; var kidsTotal = 0;   function updateTotal(tot1, tot2){ form.total.value = (adultTotal + kidsTotal).toFixed(2); }   for(var i=0; i<form.elements.length; i++){ if(form.elements[i].type.match(/(checkbox|radio)/i)){ form.elements[i].onclick = function(){ for(var i=0,total=0; i<this.form.elements.length; i++){ var input = this.form.elements[i]; if(input.type.match(/(checkbox|radio)/i) && input.checked){ adultTotal = input.value/1; } updateTotal(); } } } }   form.Children.onkeyup = function(){ form.childfee.value = form.Children.value*30; kidsTotal = Number(form.childfee.value); updateTotal(); }   form.onsubmit = function(){ for(var i=0; i<this.elements.length; i++){ var input = this.elements[i]; if(input.type.match(/(radio)/i)){ input.value = input.id+'/'+input.value; } } } </script> </body> </html>```
• Apr 15, 2013, 12:38
Pullo
Howdy,

Quote:

Originally Posted by Shnuk
I would ideally like for there to be another two more text fields that will add to the total. They would be: Number of Subs and Number of Mics.

Quick question: should these fields also have their own "Cost" field, as "Number of tops" does? Also, how much do subs and mics cost?

Quote:

Originally Posted by Shnuk
could i make all of the writing bold?

Sure! Just wrap the text in <strong> </strong> tags.

Let me know the answer to the above and I'll knock you up a quick demo.
• Apr 15, 2013, 14:02
Shnuk
Hi!

I'd like if the "cost" wasn't displayed on any of the fields. The Subs would cost €40 and the Mics would cost €10.

Thank you :)
• Apr 16, 2013, 00:26
Pullo
Hi again,

I basically rewrote the script. Here you go:

Code:

```<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">   <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">     <title>Custom Calculator</title>     <style>       #myForm div{         margin-bottom:15px;       }     </style>   </head>     <body>     <form action="" method="POST" name="myForm" id="myForm">       <h1>Custom Calculator</h1>             <div>         <input type="radio" name="mixer" id="no_mixer" value="0">         <label for="no_mixer">No Mixer</label>       </div>             <div>         <input type="radio" name="mixer" id="small_mixer" value="10">         <label for="small_mixer">Small Mixer €10</label>       </div>             <div>         <input type="radio" name="mixer" id="x32" value="50">         <label for="x32">X32 Digital Mixer €50</label>       </div>             <div>         <label for="tops">Number of Tops</label>         <input name="tops" type="text" id="tops" size="3">       </div>             <div>         <label for="subs">Number of Subs</label>         <input name="subs" type="text" id="subs" size="3">       </div>             <div>         <label for="mics">Number of Mics</label>         <input name="mics" type="text" id="mics" size="3">       </div>       <h3>Cost</h3>       <p>Total € <span id="cost">0</span></p>     </form>       <script type="text/javascript">       var f = document.forms['myForm'];       var radios = f.mixer;       var inputs = f.getElementsByTagName("input");             for(var i = 0; i < radios.length; i++) {         radios[i].onclick = function() {           updateTotal(Number(this.value));         }       }             for(var i in inputs){         if(inputs[i].type == "text"){           inputs[i].onkeyup = function(){             updateTotal(0);           }         }       }                           function updateTotal(t){         var tot = Number(f.mics.value) * 10 +                   Number(f.tops.value) * 25 +                   Number(f.subs.value) * 40 +                   t;         document.getElementById("cost").innerHTML = tot;       }     </script>   </body> </html>```
That should more or less do what you want and should be fairly easy to extend.
If you have any questions, just let me know.
• Apr 16, 2013, 04:46
Shnuk
I LOVE you :D thank you so much!
• Apr 16, 2013, 04:48
Pullo
Thanks ... I think :)
Seriously though, I'm happy to help.
If you have any more questions just let me know.
• Apr 16, 2013, 05:16
Shnuk
Now that you mention it there is one more thing....... :) would it be easy to add an "Order Now" button at the end that would send the info to my email? If it is difficult i don't want to waste your time.

Code:

```<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Custom Calculator</title> <style> #myForm div{ margin-bottom:5px; } </style> </head> <body> <form action="" method="POST" name="myForm" id="myForm"> <div> <input type="radio" name="mixer" id="no_mixer" value="0"> <label for="no_mixer"><strong>No Mixer<strong/></label> </div> <div> <input type="radio" name="mixer" id="small_mixer" value="10"> <label for="small_mixer">Small Mixer </label> </div> <div> <input type="radio" name="mixer" id="x32" value="50"> <label for="x32">X32 Digital Mixer</label> </div> <div> <label for="tops">Number of Tops</label> <input name="tops" type="text" id="tops" size="1"> </div> <div> <label for="subs">Number of Subs</label> <input name="subs" type="text" id="subs" size="1"> </div> <div> <label for="mics">Number of Mics</label> <input name="mics" type="text" id="mics" size="1"> </div> <h2> Estimate Price <h2>* **Total € <span id="cost">0</span> </form> <script type="text/javascript"> var f = document.forms['myForm']; var radios = f.mixer; var inputs = f.getElementsByTagName("input"); for(var i = 0; i < radios.length; i++) { radios[i].onclick = function() { updateTotal(Number(this.value)); } } for(var i in inputs){ if(inputs[i].type == "text"){ inputs[i].onkeyup = function(){ updateTotal(0); } } } function updateTotal(t){ var tot = Number(f.mics.value) * 10 +* Number(f.tops.value) * 25 +* Number(f.subs.value) * 40 + t; document.getElementById("cost").innerHTML = tot; } </script> </body> </html>```
• Apr 16, 2013, 05:21
Pullo
Hi,

Quote:

Originally Posted by Shnuk
would it be easy to add an "Order Now" button at the end that would send the info to my email?

This depends.
Do you have a server running PHP from which you can send mail?
This might sound complicated, but most shared hosting packages offer this.
• Apr 16, 2013, 05:26
Shnuk
Ehhhm i'm using weebly (i know it's terrible) so i doubt it :( there are built in forms that email info... Sorry i can't be more helpful.
• Apr 16, 2013, 05:49
Pullo
Well, let's try it out.

Copy the following code into a PHP file on your computer:

PHP Code:

``` <?php if ( function_exists( 'mail' ) ){     echo 'mail() is available'; } else {     echo 'mail() has been disabled'; }   ?> ```