Question

I’m trying to update the value of a field based on a select box select option and the quantity of few quantity fields, it works fine for the first field but it wouldn’t work for the rest.

this is the link to the site is http://www.snappy-pizza.net/pizza1c.php

if you choose a pizza for the first time and add toppings to it, the value of the updated price field will increase as expected, now if you change your pizza with the same toppings only the first topping will be added to the price and not the other ones.

  <input name="update_price" type="text" id="update_price" value="" size="8" maxlength="8" />


  <form>
                <select name="select" id="select">
                  <option>Select your pizza</option>
                  <option value="6.65">NY, 10&quot;, £6.65</option>
                  <option value="8.95">NY, 12&quot;, £8.95</option>
                  <option value="11.95">NY, 16&quot;, £11.95</option>
                  <option value="3.45">Chicago, 7&quot;, £3.45</option>
                  <option value="6.65">Chicago, 10&quot;, £6.65</option>
                  <option value="8.95">Chicago, 12&quot;, £8.95</option>
                  <option value="11.95">Chicago, 16&quot;, £11.95</option>
                  <option value="19.95">Chicago, Beast 24&quot; x 18&quot;, £19.95</option>
                 </select>
         </form>


       <form>
         <tr>
            <td> 

            <span class="descriptionsPizza">EXTRA CHEESE</span>
            <input name="minus1" type="button" class="button minus" id="minus1" value=" - " />
            <input name="textfield1" type="text" id="textfield1" class="valfield" size="2" maxlength="2" value="0" />
            <input name="add1" type="button" class="button add" id="add1" value=" + " />
            </td>

            <td>
            <span class="descriptionsPizza">HAM</span>    
            <input name="minus2" type="button" class="button minus" id="minus2" value=" - " />
            <input class="valfield" name="textfield2" type="text" id="textfield2" size="2" maxlength="2" value="0"/>
            <input name="add2" type="button" class="button add" id="add2" value=" + " />
            </td>
            </tr>




           //function to change the quantity field by pressing the + and - buttons
   $(function()
    {
      topping_price = 1;
      $(".add").click(function(){
     var newQty =+($(this).siblings(".valfield").val()) + 1;
     $(this).siblings(".valfield").val(newQty);

 current_price =+($('input[name=update_price]').val() );
 $('input[name=update_price]').val(topping_price + current_price);
  });

 $(".minus").click(function(){
 var newQty = +($(this).siblings(".valfield").val()) - 1;
 if(newQty < 0)newQty = 0;
 $(this).siblings(".valfield").val(newQty);

var current_price =+($('input[name=update_price]').val() );
$('input[name=update_price]').val(current_price - topping_price);
});

});

  //function to get the value and text of the selected select box and insert them into hidden fields.
 $(function()
  {
$('#select').change( function() {
    $('input[name=my-item-name]').val( $("#select :selected").text() );
    $('input[name=my-item-price]').val( $("#select").val() );

    $(".add").each(function() {
        //gets the value of the selected box (i.e.price) and insert it into the updated price field.
        var new_qty =+ ($(".add").siblings(".valfield").val() );
        var pizza_price =+ ($("#select :selected").val() );
        $('input[name=update_price]').val((new_qty * topping_price) + pizza_price);
    });
});

});

any help would be appreciated..

Answer 1

I have improved your jquery.js file. This version is much cleaner.

// JavaScript Document

var toppingPrice = 1;

//function to get the value and text of the selected select box and insert them into hidden fields.  
var updateTotalPrice = function() {
  var pizzaPrice = parseFloat($("#select").val());
  var quantity = 0;
  $(".add").each(function() {
    quantity = quantity + parseInt($(this).siblings(".valfield").val(), 10);
  });
  $('#update_price').val((quantity * toppingPrice) + pizzaPrice);
}

$(function()
{
  //functions to change the quantity field by pressing the + and - buttons
  // add buttons
  $(".add").click(function(){
    var $this = $(this);
    var quantity = parseInt($this.siblings(".valfield").val(), 10) + 1;
    $(this).siblings(".valfield").val(quantity);

    updateTotalPrice();
  });

  // minus buttons
  $(".minus").click(function(){
    var $this = $(this);
    var quantity = parseInt($this.siblings(".valfield").val(), 10) - 1;
    if(quantity < 0) quantity = 0;
    $(this).siblings(".valfield").val(quantity);

    updateTotalPrice();
  });

  // selectbox
  $('#select').change(function() {
    updateTotalPrice();
  });

  //function to generate a random number and insert them to the item id hidden field
  $('input[name=my-add-button]').click(function() {
    var randomNumber = Math.floor((Math.random() * 9000) + 100);
    $('input[name=my-item-id]').val(randomNumber);
  });
});