如何添加两个字段的值并使用Jquery将其显示为第三个字段

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个项目的数量时调用该函数。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;