www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Using Check Boxes to change totals

  1. #1
    Join Date
    Apr 2014
    Posts
    44

    resolved [RESOLVED] Using Check Boxes to change totals

    So, this might be a little complicated, I'm not sure. So far, I have a form for a pizza order (for a class). It has radio buttons, check boxes, and input fields. So far, I got the radio buttons to work. When you click a radio button, it takes the value of the pizza, puts a subtotal, gst, pst, and a total at the bottom. Now, I need the same function to happen with the check boxes. I'll paste what I have below. I'm hoping someone can tell me what I'm doing wrong and what I could do to condense this and make it more efficient. Thanks!

    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="sizeAdd(4)"><input type="radio" name="Size_rg" value="10" id="$10" />Small 10" ($4.00)</label></p>
            <p><label onchange="
    sizeAdd(5)"><input type="radio" name="Size_rg" value="12" id="$12" />Medium 12" ($5.00)</label></p>
            <
    p><label onchange="sizeAdd(7)"><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 onclick="
    toppings()" 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
    var amounts = [0, 0, 0, 0, 0];
    var subTotal = 0;
    var gst = 0;
    var pst = 0;

    function sizeAdd(sizeValue) {
        amounts[0] = sizeValue;
        subTotal = amounts[0] + amounts[1] + amounts[2] + amounts[3] + amounts[4];
        document.getElementById("
    SubTotal_tb").value= subTotal.toFixed(2);
        gst = (subTotal * 0.07);
        gst = Math.round(gst*100)/100;
        pst = (subTotal * 0.07);
        pst = Math.round(pst*100)/100;
        total = subTotal + gst + pst;
        total = Math.round(total*100)/100;
        document.getElementById("
    PST_tb").value= pst.toFixed(2);
        document.getElementById("
    GST_tb").value= gst.toFixed(2);
        document.getElementById("
    Total_tb").value= total.toFixed(2);        
    }                                                          

    function toppings1() {
        if (document.getElementsByName('Anchovies_cb').checked = true) {
            amounts[1] = 0.50;
        }
        else {
            amounts[1] = 0
        }
        subTotal = amounts[0] + amounts[1] + amounts[2] + amounts[3] + amounts[4];
        document.getElementById("
    SubTotal_tb").value= subTotal.toFixed(2);
        gst = (subTotal * 0.07);
        gst = Math.round(gst*100)/100;
        pst = (subTotal * 0.07);
        pst = Math.round(pst*100)/100;
        total = subTotal + gst + pst;
        total = Math.round(total*100)/100;
        document.getElementById("
    PST_tb").value= pst.toFixed(2);
        document.getElementById("
    GST_tb").value= gst.toFixed(2);
        document.getElementById("
    Total_tb").value= total.toFixed(2);    

    Also note, I've only got the "onclick" event on the first topping, Anchovies, as I tried it out an it didn't work, so I haven't added anything to the other check boxes.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,350
    So what was wrong with the response #4 on http://www.webdeveloper.com/forum/sh...-an-order-form ?

    If you have a different question, start a new thread.
    If it is a continuation of an earlier question, post back there.

    It tends to lead to confusions and loss of interest when we have to follow numerous threads to see where you are with your queries.

  3. #3
    Join Date
    Apr 2014
    Posts
    44
    So, I just found an error. I had the onclick in the form as toppings() and the function was called toppings1(). I fixed that, and now the $0.50 adds to the totals at the bottom of the form, but when I unclick the checkbox for Anchovies, it doesn't minus the 0.50. Anyone have an idea how I'd do that?

  4. #4
    Join Date
    Apr 2014
    Posts
    44
    Oh my, how did I miss that?! I didn't even realize what you'd done there. There's nothing wrong with it at all! In fact, it works wonders.

    I guess I got off trying to work out a solution on my own and got caught up in it and wanted to find a solution to a new problem. But your solution to the old problem is infinitely better. Thank you so much!

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