Wie ändere ich den Wert eines Feldes auf der Grundlage einer Menge Feld und eine Auswahlbox

Question

Ich versuche, den Wert eines Feldes auf der Grundlage einer Auswahlbox Option zu aktualisieren und die Menge der wenigen Menge Felder, es funktioniert gut für das erste Feld, aber für den Rest würde es nicht funktionieren.

dies ist der Link zu der Website http://www.snappy-pizza.net/pizza1c.php

ist, wenn Sie eine Pizza zum ersten Mal wählen und garniert es, der Wert des aktualisierten Preisfeldes wird wie erwartet erhöhen, jetzt, wenn Sie Ihre Pizza ändern Bei den gleichen Belägen wird nur der erste Belag zum Preis hinzugefügt und nicht der andere Belag.

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

});

jede mögliche Hilfe würde geschätzt werden.

Answer 1

Ich habe Ihre jquery.js Datei verbessert. Diese Version ist viel sauberer.

// 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

Versuchen Sie dieses;

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