SitePoint Sponsor

User Tag List

Results 1 to 22 of 22
  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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 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
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 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
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  12. #12
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Howdy,

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

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

  14. #14
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 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.

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

  16. #16
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 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.

  17. #17
    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

  18. #18
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 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.

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

  20. #20
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    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';
    }  
    ?>
    Upload it to your server and navigate to that address.
    What message do you see?

  21. #21
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm sorry but i haven't got a clue what to do... It's ok i will manage without

  22. #22
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,055
    Mentioned
    219 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
  •