Javascript總和字段在許多選擇和把這個值在輸入

Question

我用這個腳本從我的數據庫MYSQL恢復一些數據，它工作得很好。我的頁面在PHP中。

<script type = "text/javascript"> 
$(document).ready(function() { 
    $("select#product1").on("change", function() { 
     var id = this.value; 
     $.ajax({ 
      url: "ajax.php", 
      method: "post", 
      data: "id=" + id, 
      success: function(response) { 
       var datashow = JSON.parse(response); 
       price1 = datashow[0].price; 
       time1 = datashow[0].time; 
       $("input#totalprice").val(price1); 
       $("input#totaltime").val(time1); 
      } 
     }); 
    }); 
}); </script> 

我的HTML是這樣的：

<select id="product1" name="product1"> 
    <option value="" selected="selected">-</option> 
    <option value='17'>Product1</option> 
</select> 
<select id="product1" name="product2"> 
    <option value="" selected="selected">-</option> 
    <option value='17'>Product1</option> 
</select> 
<select id="product1" name="product3"> 
    <option value="" selected="selected">-</option> 
    <option value='17'>Product1</option> 
</select> 
<select id="product1" name="product4"> 
    <option value="" selected="selected">-</option> 
    <option value='17'>Product1</option> 
</select> 
<select id="product1" name="product5"> 
    <option value="" selected="selected">-</option> 
    <option value='17'>Product1</option> 
</select> 


<input id="totalprice" type="text" name="totalprice" /> 
<input id="totaltime" type="text" name="totaltime" /> 

這樣我能填補我的2個不同的輸入：TOTALTIME和totalprice，與我的阿賈克斯資產的賬面價值。 PHP文件。

問題是，我有5個不同的選擇，不僅product1，而且product2，product3，product4和product5。

我需要我的2輸入，totalprice和totaltime，自動填充從我的ajax中恢復的值的總和，爲每個選擇。 這意味着我會（或者可能不是，它們不是必填字段）price2和time2，price3和time3 ...

更清晰：我有5個不同的選擇字段，動態產品。這些產品中的每一個都有價格和時間存儲在MySQL中，我通過JSON恢復。我需要將總價格（這些中的每一個的總和）和總時間存儲到輸入中。

任何想法，我如何解決這個問題？

謝謝:)

Answer 1

如果我正確認識你您想循環瀏覽json數據並將每個價格添加到總變量中，然後將其存儲在總價格輸入中。我假設HTML標記，你將不得不調整你的ID和類名匹配。當然，在AJAX調用期間，每個輸入的值都會從數據庫中動態添加，看起來您已經認識到了這一點。只要確保將JavaScript代碼放入Ajax成功函數中即可。

Live Preview

HTML：

<select class="product" name="product1"> 
<option value="" selected="selected">-</option> 
<option value='20'>20</option> 
</select> 
<select class="product" name="product2"> 
    <option value="" selected="selected">-</option> 
    <option value='30'>30</option> 
</select> 
<select class="product" name="product3"> 
    <option value="" selected="selected">-</option> 
    <option value='40'>40</option> 
</select> 
<select class="product" name="product4"> 
    <option value="" selected="selected">-</option> 
    <option value='15'>15</option> 
</select> 
<select class="product" name="product5"> 
    <option value="" selected="selected">-</option> 
    <option value='22'>22</option> 
</select>  

<input id="totalprice" type="text" name="totalprice" /> 
<input id="totaltime" type="text" name="totaltime" /> 

的JavaScript/JQuery的（在你的Ajax成功功能月底配售）：

var total = 0; 

//I am using this to simulate your ajax function since I don't have access to your database 
$("select").on("change", function() { 

    //Place the following code at the bottom of your ajax success function 

    //clear out the total to 
    //prevent old prices from being added to the total 
    total = 0; 

    $(".product").each(function() { 

    //if the value is not an empty string 
    if ($(this).val() !== "") { 

     //add the price to the total 
     total += parseInt($(this).val()); 

    } 

    }); //end each function 

    //update the total 
    $("#totalprice").val(total); 

}); //end on change event 

更新可選的解決方案：根據你的通訊我相信你會想做下面的事情。現在請記住，您必須更改ajax調用的url，並將datashow變量的值切換回原來的值。我不得不改變它使用json文件來模擬你對數據庫的調用。

HTML：

<div id="products"> 
<select id="product1" name="product1"> 
    <option value="" selected="selected">-</option> 
    <option value='17'>Product1</option> 
</select> 
<select id="product2" name="product2"> 
    <option value="" selected="selected">-</option> 
    <option value='17'>Product1</option> 
</select> 
<select id="product3" name="product3"> 
    <option value="" selected="selected">-</option> 
    <option value='17'>Product1</option> 
</select> 
<select id="product4" name="product4"> 
    <option value="" selected="selected">-</option> 
    <option value='17'>Product1</option> 
</select> 
<select id="product5" name="product5"> 
    <option value="" selected="selected">-</option> 
    <option value='17'>Product1</option> 
</select> 
     </div> 

<input id="totalprice" type="text" name="totalprice" /> 
<input id="totaltime" type="text" name="totaltime" /> 

的JavaScript：

$(document).ready(function() { 
    $("#products select").on("change", function() { 
     var id = this.value; 
     $.ajax({ 
      url: "ajax.json", 
      method: "get", 
      data: "id=" + id, 
      success: function(response) {    

     //initialize totalPrice to 0 if doesn't contain a value 
     var totalPrice = $("#totalprice").val() !== "" ? parseInt($("#totalprice").val()): 0; 

       var datashow = response;//JSON.parse(response); 
       var price1 = parseInt(datashow[0].price); 
       var time1 = datashow[0].time; 


       //add the total price 
       $("input#totalprice").val(totalPrice + price1); 

       //Do something similar for time, I don't how you plan on parsing this? 
       $("input#totaltime").val(time1); 


      } 
     }); 
    }); 
}); 

Answer 2

當您添加值到文本框之前選中此複選框

var value1 =$("input#totalprice").val(); 
var totalPrice = parseInt(price1)+parseInt(value1); 
$("input#totalprice").val(totalPrice); 

Answer 3

的價值試試這個辦法

var price = parseInt($("input#totalprice").val()); 
    var time= parseInt($("input#totaltime").val()); 

    $("input#totalprice").val(price+price1); 
    $("input#totaltime").val(time+time1);