数量フィールドと選択ボックスに基づいてフィールドの値を変更する方法

Question

選択ボックス選択オプションと数量フィールドの量に基づいてフィールドの値を更新しようとしていますが、最初のフィールドは残っていても機能しません。

これは、サイトへのリンクはあなたが初めてピザを選択し、それにトッピングを追加する場合に予想されるとして、更新価格フィールドの値が今、あなたのピザを変更した場合、増加しますhttp://www.snappy-pizza.net/pizza1c.php

です同じトッピングでは最初のトッピングだけが価格に追加され、他のトッピングは追加されません。

<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); 
    }); 
}); 

}）;

任意の助けをいただければ幸い

..

Answer 1

jquery.jsファイルが改善されました。このバージョンははるかにクリーンです。

// 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); 
    }); 
}); 

Answer 2

これを試してみてください。

$(function() { 
    $('#select').change(function() { 
    var pizza_price = parseFloat($(this).val()); 
    var new_qty = 0; 
    $(".add").each(function() { 
     new_qty = new_qty + parseInt($(this).siblings(".valfield").val(), 10); 
    }); 
    $('#update_price').val((new_qty * topping_price) + pizza_price); 
    }); 
});