Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="item" id="pizzaForm">
    <fieldset>
        <form class="pure-form">
​
            <label><b>Pizza Type: &nbsp;</b></label>
            <select class="pizza">
                <option name="margarita">Margarita</option>
                <option name="deep-pan">Deep Pan</option>
                <option name="stuffed-crust">Stuffed Crust</option>
            </select>
            <span style="float:right">
                <label><b>Pizza Size: &nbsp;</b></label>
                <select class="size">
                    <option data-price="4.99" name="e-small" ">Extra Small - £4.99</option>
                    <option data-price="5.99" name="small">Small - £5.99</option>
                    <option data-price="6.99" name="medium">Medium - £6.99</option>
                    <option data-price="8.99" name="large">Large - £8.99</option>
                    <option data-price="9.99" name="e-large">Extra Large - £9.99</option>
                    <option data-price="10.99" name="f-size">Family Size - £10.99</option>
                </select>
            </span>
        </form>
    </fieldset>
    <fieldset style="border-top:0px">
        <form class="pure-form">
            <legend><b>Toppings (99p Each): &nbsp;</b></legend>
            <input type="checkbox" name="onions" >Onions</input>
            <input type="checkbox" name="mushrooms" >Mushrooms</input>
            <input type="checkbox" name="peppers" >Peppers</input>
            <input type="checkbox" name="olives" >Olives</input>
            <input type="checkbox" name="garlic">Garlic</input>
            <input type="checkbox" name="peperoni" >Peperoni</input>
            <input type="checkbox" name="cheese" >Pesto</input>
        </form>
    </fieldset>
    <br>
</div>
<div id="extraPizza"></div>
<div id="totalPrice"></div>
<center><button id="addPizza"> Add Pizza </button></center>
                             
                             
</body>
</html>
 
$(function(){
  
  
  
            $(".size").prop('disabled', true);
            $("input[type='checkbox']").prop('disabled', true);
            $(document).on("change", ".pizza", function () {
​
                var _this = $(this);
                _this.closest("fieldset").find(".size").prop('disabled', false);
  calculateCost();
            });
​
            $(document).on("change", ".size", function () {
                // alert('size changed event called');
                var _this = $(this);
                var selected = _this.find('option:selected');
                _this.closest("div").find("input[type='checkbox']").prop('disabled', false);
                calculateCost();
            });
​
            $(document).on("change", 'input[type=checkbox]', function () {
               
                calculateCost();
            });
​
            var currentTotal = 0;
            function calculateCost() {
​
                var totalCost = 0;
                $(".item").each(function (index, item) {
​
                    var _this = $(item);
                    var total = 0;
​
                    var selected = _this.find('.size').find('option:selected');
                    var selectionPrice = selected.data("price");
​
                    var pizzaPrice = parseFloat(selectionPrice, 10);
​
                    var toppings = _this.closest("div").find("input[type='checkbox']:checked").length;
                    toppingCost = 0.99 * toppings;
​
                    total = selectionPrice + toppingCost;
                    totalCost = totalCost + total;
                });
                $("#totalPrice").text(totalCost.toFixed(2));
​
​
            }
            var counter = 1;
            $("#addPizza").click(function () {
                counter++;
                $("#pizzaForm").clone().attr("id", "div-" + counter)
                  .appendTo("#extraPizza");
                calculateCost();
            });
  
  
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kshyjupro
0viewers