I'm trying to create a simple menu and when customers click what they want, I want it to calculate and give a final price and display it.

<!DOCTYPE html>

<html>

    <head>

        <script language="javascript" type="text/javascript">
           (document).ready(function() {
               $('#calculateTotal').click(function() {
                    var singleTopping = 1.20, var doubleTopping = 2.20;
                    }
                      }
            </script>

       <title>Design a Pizza</title>

       <link rel="stylesheet" href="master.css" type="text/css">

    </head>

    <body>

        <div class="container">

            <div class="top">

                <img src="img/logo.png" alt="Pizza Logo">

            </div>

            <div class="content">

                <h1>Design a Pizza</h1>

                <div class="sauce">

                    <h2>Base Sauce</h2>

                 <input type="radio" id="tomato" name="sauce" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="tomato">Tomato</label>
                  <input type="radio" id="bbq" name="sauce" value="false">
                    <label for="bbq">BBQ</label>
                  <input type="radio" id="none" name="sauce" value="false">
                    <label for="none">No Sauce</label>
                </div>    

                <div class="base">

                    <h2>Bases</h2>

                  <input type="radio" id="pan" name="base" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="pan">Pan</label>
                  <input type="radio" id="italian" name="base" value="false">
                    <label for="italian">Italian</label>
                  <input type="radio" id="stuffed" name="base" value="false">
                    <label for="stuffed">Stuffed Crust</label>
                  <input type="radio" id="gfree" name="base" value="false">
                    <label for="gfree">Gluten Free</label>

                 </div>

                <div class="toppings">

                    <h2>Toppings</h2>

                  <input type="checkbox" id="chicken" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="chicken">Chicken</label>
                  <input type="checkbox" id="ham" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="ham">Ham</label>
                  <input type="checkbox" id="cajun" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="cajun">Cajun Chicken</label>
                  <input type="checkbox" id="Pepperoni" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="Pepperoni">Pepperoni</label>    
                  <input type="checkbox" id="spicymeat" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="spicymeat">Spicy Meat Beef</label> 
                  <input type="checkbox" id="crispybacon" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="crispybacon">Crispy Bacon</label> 
                  <input type="checkbox" id="sausage" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="sausage">Spicy Pork Sausage</label> 
                  <input type="checkbox" id="meatballs" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="meatballs">Meatballs</label> 
                  <input type="checkbox" id="chorizo" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="chorizo">Chorizo</label> 
                  <input type="checkbox" id="steak" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="steak">Steak</label> 
                  <input type="checkbox" id="anchovies" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="anchovies">Anchovies</label> 
                  <input type="checkbox" id="tuna" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="tuna">Tuna</label>
                  <input type="checkbox" id="greenchillies" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="greenchillies">Green Chillies</label>
                  <input type="checkbox" id="jalapenos" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="jalapenos">Jalapenos</label> 
                  <input type="checkbox" id="mixedpeppers" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="mixedpeppers">Mixed Peppers</label> 
                  <input type="checkbox" id="mushrooms" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="mushrooms">Mushrooms</label>
                  <input type="checkbox" id="tomato" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="tomato">Tomato</label>
                  <input type="checkbox" id="pineapple" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="pineapple">Pineapple</label>
                  <input type="checkbox" id="onions" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="onions">Onions</label>
                  <input type="checkbox" id="sweetcorn" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="sweetcorn">Sweetcorn</label>
                  <input type="checkbox" id="slicedolives" name="topping" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="slicedolives">Sliced Black Olives</label>
                 </div>


                <div class="size">

                    <h2>Size</h2>

                 <input type="radio" id="small" name="size" value="all" onclick="DisplayPrice(this.value)" >
                    <label for="small">Small</label>
                  <input type="radio" id="medium" name="size" value="false">
                    <label for="medium">Medium</label>
                  <input type="radio" id="large" name="size" value="false">
                    <label for="large">Large</label>
                </div>    

            </div> 

        </div>

    </body>

</html>

Thats what I have at the moment, I would appreciate any help.

Thanks,

Ashley

Recommended Answers

All 4 Replies

Perhaps looking at the source of this old demo can give you a clue.

This didn't work.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.