2つのフィールドの値を追加してJqueryで3番目に表示する方法

Question

注文フォームを作成しています。数量に基づいて各製品の価格が計算されます。この計算は機能しています。顧客が製品の数量を選択すると合計商品数と合計価格が表示されている必要があります。私は加算の計算をすることができません。誰かが助けることができますか？以下はコードとスクリーンショットです。

<div class="pp"> 
<h3>Choose From Range of Premium Breads</h3> 
Product 1 
<br><br> 
<input type="text" name="text-695" value="" size="40" class="wpcf7-form-control wpcf7-text" id="qty" aria-invalid="false" placeholder="Enter QTY"> 
<input type="text" name="text-792" value="" size="40" class="wpcf7-form-control wpcf7-text tp" id="price" aria-invalid="false"> 
<br><br> 
Product 2 
<br><br> 
<input type="text" name="text-696" value="" size="40" class="wpcf7-form-control wpcf7-text" id="qty1" aria-invalid="false" placeholder="Enter QTY"> 
<input type="text" name="text-793" value="" size="40" class="wpcf7-form-control wpcf7-text tp" id="price1" aria-invalid="false"> 

<br><br>Total Price<br><br> 
<input type="text" name="text-903" value="" size="40" class="wpcf7-form-control wpcf7-text" id="items" aria-invalid="false"> 
<input type="text" name="text-362" value="" size="40" class="wpcf7-form-control wpcf7-text" id="total" aria-invalid="false"> 
</div> 


jQuery(document).ready(function(){ 
//alert("Welcome"); 
var qty; 
var price; 
var qty1; 
var price1; 
var x; 
var total; 

jQuery("#qty").on("change", function() { 
qty= this.value ; 
price=qty*8.50; 
jQuery("#price").val(price.toFixed()); 

}); 
jQuery("#qty1").on("change", function() { 
qty1= this.value ; 
price1=qty1*9.50; 
jQuery("#price1").val(price1.toFixed()); 

}); 

jQuery("#price").on("change", function() { 
x= this.value ; 
total=x; 
jQuery("#total").val(total.toFixed()); 

}); 

}); 

Answer 1

あなたは#total入力ボックスに2つのアイテムの価格の合計を表示したい場合、あなたはおそらく以下のような何かを行うことができます。

合計を更新するコードを別の関数に保存し、2つのアイテムの数量のいずれかが変更されたときは必ずその関数を呼び出す必要があります。

//alert("Welcome"); 
 
var qty; 
 
var price; 
 
var qty1; 
 
var price1; 
 
var x; 
 
var total; 
 

 
jQuery("#qty").on("change", function() { 
 
qty= this.value ; 
 
price=qty*8.50; 
 
jQuery("#price").val(price.toFixed()); 
 
updateTotal(); 
 

 
}); 
 
jQuery("#qty1").on("change", function() { 
 
qty1= this.value ; 
 
price1=qty1*9.50; 
 
jQuery("#price1").val(price1.toFixed()); 
 
updateTotal(); 
 

 
}); 
 

 
function updateTotal(){ 
 
    // calculate price total 
 
    var priceofItem1 = parseFloat(price) || 0; 
 
    var priceofItem2 = parseFloat(price1) || 0; 
 
    var total = priceofItem1 + priceofItem2; 
 
    
 
    // calculate items total 
 
    var quantityofItem1 = parseFloat(qty) || 0; 
 
    var quantityofItem2 = parseFloat(qty1) || 0; 
 
    var totalQuantity = quantityofItem1 + quantityofItem2; 
 
    
 
    jQuery("#items").val(totalQuantity); 
 
    jQuery("#total").val(total); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div class="pp"> 
 
<h3>Choose From Range of Premium Breads</h3> 
 
Product 1 
 
<br><br> 
 
<input type="text" name="text-695" value="" size="40" class="wpcf7-form-control wpcf7-text" id="qty" aria-invalid="false" placeholder="Enter QTY"> 
 
<input type="text" name="text-792" value="" size="40" class="wpcf7-form-control wpcf7-text tp" id="price" aria-invalid="false"> 
 
<br><br> 
 
Product 2 
 
<br><br> 
 
<input type="text" name="text-696" value="" size="40" class="wpcf7-form-control wpcf7-text" id="qty1" aria-invalid="false" placeholder="Enter QTY"> 
 
<input type="text" name="text-793" value="" size="40" class="wpcf7-form-control wpcf7-text tp" id="price1" aria-invalid="false"> 
 

 
<br><br>Total Price<br><br> 
 
<input type="text" name="text-903" value="" size="40" class="wpcf7-form-control wpcf7-text" id="items" aria-invalid="false"> 
 
<input type="text" name="text-362" value="" size="40" class="wpcf7-form-control wpcf7-text" id="total" aria-invalid="false"> 
 
</div>