Calculate form total

bcalagoure · April 4, 2013, 7:04pm

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.



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

James_Hibbard · April 4, 2013, 9:35pm

Hi there,

This should do the trick:

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

bcalagoure · April 4, 2013, 10:04pm

That works a treat, thanks
Just wondering why you put the code on the bottom?

James_Hibbard · April 5, 2013, 11:23am

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().

bcalagoure · April 8, 2013, 11:54am

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.


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

James_Hibbard · April 8, 2013, 11:59am

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:

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

To this:

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

And all will be good.

bcalagoure · April 8, 2013, 12:21pm

Thank you again

Shnuk · April 15, 2013, 12:25am

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.

Thank you in advance!

James_Hibbard · April 15, 2013, 6:22am

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.

Shnuk · April 15, 2013, 3:12pm

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

Shnuk · April 15, 2013, 3:13pm

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

James_Hibbard · April 15, 2013, 7:38pm

Howdy,

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

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.

Shnuk · April 15, 2013, 9:02pm

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

James_Hibbard · April 16, 2013, 7:26am

Hi again,

I basically rewrote the script. Here you go:

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

Shnuk · April 16, 2013, 11:46am

I LOVE you thank you so much!

James_Hibbard · April 16, 2013, 11:48am

Thanks … I think
Seriously though, I’m happy to help.
If you have any more questions just let me know.

Shnuk · April 16, 2013, 12:16pm

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.


<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 &#8364; <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>

James_Hibbard · April 16, 2013, 12:21pm

Hi,

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.

Shnuk · April 16, 2013, 12:26pm

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.

James_Hibbard · April 16, 2013, 12:49pm

Well, let’s try it out.

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

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

Upload it to your server and navigate to that address.
What message do you see?