www.webdeveloper.com
Results 1 to 6 of 6

Thread: How to get totals from an order form?

  1. #1
    Join Date
    Apr 2014
    Posts
    44

    How to get totals from an order form?

    Okay, so I've got to get a pizza order form working for my schooling (validation anyways, not formulas/functions). I've set up the basic form, go the buttons and everything working but I'm not sure how to proceed now. What I want to happen, is every time the user selects something different on the form, it automatically updates the subtotals, gst, pst, and total at the bottom of the form. I believe I know how to get it to do one at a time (They select a pizza size and it returns the pizza value to the subtotal, and so on), but ideally, it should continue to add together. So, if I select a size, say a Small Pizza, 4.00 appears in the subtotal box, 0.28 appears in the GST and PST boxes, and 4.58 appears in the total. Then, when I click to add a topping (at 0.50), it automatically updates the 4 amounts.

    Here's my code:

    PHP Code:
    //HTML
    <form method="post" name="pizzaOrderForm" action="http://programs.siast.sk.ca/newmedia/onlinescripts/pizzaorder_olympic.php" target="_blank" onsubmit="return validateForm();">
        <
    h3>Please enter your contact information:</h3>
            <
    p><label for="FirstName_tf">First Name: </label><input name="FirstName_tf" id="FirstName_tf" type="text"></p>
            <
    p><label for="LastName_tf">Last Name: </label><input name="LastName_tf" id="LastName_tf" type="text"></p>
            <
    p><label for="Address_tf">Address: </label><input name="Address_tf" id="Address_tf" type="text"></p>
            <
    p><label for="Phone_tf">Phone: </label><input name="Phone_tf" id="Phone_tf" type="text"></p>
            <
    p><label for="Email_tf">Email: </label><input name="Email_tf" id="Email_tf" type="text"></p>
          
        <
    h3>What size of pizza would you like to order?</h3>
              <
    p><label onchange="pizzaSize(this)"><input type="radio" name="Size_rg" value="10" id="10" />Small 10 ($4.00)</label></p>
            <
    p><label><input type="radio" name="Size_rg" value="12" id="12" />Medium 12 ($5.00)</label></p>
            <
    p><label><input type="radio" name="Size_rg" value="15" id="15" />Large 15 ($7.00)</label></p>
          
        <
    h3>What toppings would you like?</h3>
          <
    div id="checkboxes">
            <
    p><input name="Anchovies_cb" type="checkbox" value="yes" /><label for="Anchovies_cb">Anchovies</label></p>
            <
    p><input name="DoubleCheese_cb" type="checkbox" value="yes" /><label for="DoubleCheese_cb">Double Cheese</label></p>
            <
    p><input name="Pepperoni_cb" type="checkbox" value="yes" /><label for="Pepperoni_cb">Pepperoni</label></p>
            <
    p><input name="Mushroom_cb" type="checkbox" value="yes" /><label for="Mushroom_cb">Mushrooms</label></p>
          </
    div>
          
        <
    h3>Please select a payment method from the selection box.</h3>
             <
    select id="Payment_menu" size="4">
              <
    option value="select">- Select Payment Method -</option>
              <
    option value="cash">Cash</option>
              <
    option value="debit">Debit</option>
              <
    option value="credit">Credit</option>
          </
    select>
        
        <
    h3>Your order cost information:</h3>
        <
    p><label for="SubTotal_tb">Subtotal: </label>
          <
    input type="text" name="SubTotal_tb" id="SubTotal_tb" value="" readOnly=true />
        <
    p><label for="PST_tb">PST: </label>
          <
    input type="text" name="PST_tb" id="PST_tb" value="" readOnly=true />
        <
    p><label for="GST_tb">GST: </label>
          <
    input type="text" name="GST_tb" id="GST_tb" value="" readOnly=true />
        <
    p><label for="Total_tb">TOTAL: </label>
          <
    input type="text" name="Total_tb" id="Total_tb" value="" readOnly=true />
        
       <
    p><input type="submit" name="Submit_but"></p>
    </
    form>

    //Javascript

    function pizzaSize(data) {
    document.getElementById ("10").value data.value;    
    }

    //I only have this little bit for a function, but I figured right away it wasn't really going to get me my desired result. I haven't started building any other functions yet as I'm not sure how to proceed. I do have an extensive validation function set up, but I don't think it's necessary to paste in at this point. 
    Even hints or anything really that can push me in the right direction would be a lot of help! Thanks!

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364
    Consider this...

    ID values must be unique. OK they are .
    But they also must begin with a letter or a limited set of characters (like $ or _).
    So your assignment of id="10" and id="12" may work on your current browser,
    but it will not work on all of them and it probably will not validate as is.

  3. #3
    Join Date
    Apr 2014
    Posts
    44
    That's fine and all, but I'll get to the nitpicky stuff a little later. Right now, my main concern is that I don't know how to build a function that will adjust as the user changes the form. I can figure out how to get each value into a function (small pizza, 2 toppings = add together and output subtotal, gst, pst, total), not too hard. What I'm having trouble trying to figure out, is how to build a function that sees the small pizza for $4 and outputs all the info, then the user decides to switch to a medium for $5, and the form adjusts automatically to new outputs. How do you make a function understand that it needs to minus the $4 and then add $5 for new totals?

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb

    Maybe nitpicky to you now, but later you will forget it and wonder why things don't work right as designed.

    Note, the radio buttons do not require an id value as it is mutually exclusive with the group name

    There are better ways to collect the checkbox information, but I'll let you nitpick that out later.
    Note that you did not include values for the additions, so I made some up to show proof of concept.

    Also note that I have no idea what the PST: or GST: stands for nor how they are calculated.
    I'll let you add that little bit of my nitpick to your code later.

    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    
    <title> HTML5 page </title>
    
    </head>
    <body>
    <!-- removed for testing purposes
    <form method="post" name="pizzaOrderForm"
     action="http://programs.siast.sk.ca/newmedia/onlinescripts/pizzaorder_olympic.php" target="_blank" onsubmit="return validateForm();">
    // -->
    <form name="pizzaOrderForm" method="post" action="javascript:alert('success')" target="_blank" onsubmit="return false">
    
        <h3>Please enter your contact information:</h3>
            <p><label for="FirstName_tf">First Name: </label><input name="FirstName_tf" id="FirstName_tf" type="text"></p>
            <p><label for="LastName_tf">Last Name: </label><input name="LastName_tf" id="LastName_tf" type="text"></p>
            <p><label for="Address_tf">Address: </label><input name="Address_tf" id="Address_tf" type="text"></p>
            <p><label for="Phone_tf">Phone: </label><input name="Phone_tf" id="Phone_tf" type="text"></p>
            <p><label for="Email_tf">Email: </label><input name="Email_tf" id="Email_tf" type="text"></p>
          
        <h3>What size of pizza would you like to order?</h3>
            <p><label><input type="radio" name="Size_rg" value="4" onchange="calc()" />Small 10 ($4.00)</label></p>
            <p><label><input type="radio" name="Size_rg" value="5" onchange="calc()" />Medium 12 ($5.00)</label></p>
            <p><label><input type="radio" name="Size_rg" value="6" onchange="calc()" />Large 15 ($7.00)</label></p>
          
        <h3>What toppings would you like?</h3>
          <div id="checkboxes">
            <p><input id="Anchovies_cb" type="checkbox" value="1.75" onchange="calc()" /><label for="Anchovies_cb">Anchovies: $1.75</label></p>
            <p><input id="DoubleCheese_cb" type="checkbox" value="1.5" onchange="calc()" /><label for="DoubleCheese_cb">Double Cheese: $1.50</label></p>
            <p><input id="Pepperoni_cb" type="checkbox" value="1.25" onchange="calc()" /><label for="Pepperoni_cb">Pepperoni: $1.25</label></p>
            <p><input id="Mushroom_cb" type="checkbox" value="1" onchange="calc()" /><label for="Mushroom_cb">Mushrooms: $1.00</label></p>
          </div>
          
        <h3>Please select a payment method from the selection box.</h3>
          <select id="Payment_menu" size="4">
            <option value="select">- Select Payment Method -</option>
            <option value="cash">Cash</option>
            <option value="debit">Debit</option>
            <option value="credit">Credit</option>
          </select>
        
        <h3>Your order cost information:</h3>
        <p><label for="SubTotal_tb">Subtotal: </label>
          <input type="text" name="SubTotal_tb" id="SubTotal_tb" value="" readOnly=true />
        <p><label for="PST_tb">PST: </label>
          <input type="text" name="PST_tb" id="PST_tb" value="" readOnly=true />
        <p><label for="GST_tb">GST: </label>
          <input type="text" name="GST_tb" id="GST_tb" value="" readOnly=true />
        <p><label for="Total_tb">TOTAL: </label>
          <input type="text" name="Total_tb" id="Total_tb" value="" readOnly=true />
        
       <p><input type="submit" name="Submit_but"></p>
    </form>
    
    <script type="text/javascript">
    function calc() {
      var sum = 0;
      sum += parseFloat(getRBtnName('Size_rg'));
      var idList = ['Anchovies_cb','DoubleCheese_cb','Pepperoni_cb','Mushroom_cb'];
      for (var i=0; i<idList.length; i++) {
        if (document.getElementById(idList[i]).checked) { sum += parseFloat(document.getElementById(idList[i]).value); }
      }
      document.getElementById ("SubTotal_tb").value = sum.toFixed(2);  
    // add to sum the values associated with 'PST_tb' and 'GST_tb'  :  NOT GIVEN in original post request    
      document.getElementById ("Total_tb").value = sum.toFixed(2);    
    }
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
    //  return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
      return str;
    } 
    
    </script>
    
    </body>
    </html>

  5. #5
    Join Date
    Aug 2008
    Posts
    40
    Sorry to drop in, but quick question for mrjane. . . You had a question about arrays here http://www.webdeveloper.com/forum/sh...-radio-buttons . I’m doing something similar with clothing and have everything lined up, but i can get the arrays right. How did you set yours up.

    Thanks. . .

  6. #6
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    If the forms are on different pages and you only have to use/want/know JavaScript, then you have a few options. First, use hidden fields to store the amounts. Not the best but still an option. Second, cookies, for which there are plenty of resources as you'll want to create functions for them. This link is a good starting point. Third, local storage, although it's not really meant for storing values of just a few things, it's still an option to consider. Fourth, use AJAX to read the values and append them to a common variable, although this depends a bit on how your forms and site is set up.

    Depending which door you choose, you're going to have to reset the values after the total is calculated.

    If you can use/know/want to use PHP (or any server-side language for that matter) then it makes this task so much easier.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles