SitePoint Sponsor

User Tag List

Results 1 to 22 of 22

Hybrid View

  1. #1
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That works a treat, thanks
    Just wondering why you put the code on the bottom?

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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().

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2006
    Posts
    125
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you again

  8. #8
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  9. #9
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  10. #10
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    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.

  12. #12
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I LOVE you thank you so much!

  13. #13
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Thanks ... I think
    Seriously though, I'm happy to help.
    If you have any more questions just let me know.

  14. #14
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>
    Last edited by DaveMaxwell; Apr 16, 2013 at 05:22. Reason: Wrapped in code tags

  15. #15
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by Shnuk View Post
    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.

  16. #16
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,941
    Mentioned
    215 Post(s)
    Tagged
    12 Thread(s)
    Shame. It's not that difficult.
    Can you upload files to your webspace via FTP?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •