如何使用Jquery将两个字段的值相加并显示到第三个字段中

我正在创建订单。价格将根据数量计算每种产品的价格。这个计算是可行的。一旦客户选择了产品的数量。必须显示项目总数和总价。我不能计算加法。有人能帮忙吗？下面是代码和屏幕截图

从一系列优质面包中选择
产品1






产品2





总价


jQuery（文档）.ready（函数（）{
//警惕（“欢迎”）；
变量数量；
var价格；
qty1变种；
var价格1；
var x；
总风险价值；
jQuery（#qty”）.on（“change”，function（）{
数量=此值；
价格=数量*8.50；
jQuery（“#price”）.val（price.toFixed（））；
}); 
jQuery（#qty1”）.on（“change”，function（）{
qty1=该值；
价格1=qty1*9.50；
jQuery（“#price1”）.val（price1.toFixed（））；
});
jQuery（“#price”）.on（“change”，function（））{
x=该值；
总数=x；
jQuery（“#total”）.val（total.toFixed（））；
});
});

如果您想在#总计输入框中显示这两个项目的价格总和，您可能可以执行以下操作

您应该将更新总计的代码保存在一个单独的函数中，然后在这两个项目的任何数量发生更改时调用该函数

//警报（“欢迎”）；
变量数量；
var价格；
qty1变种；
var价格1；
var x；
总风险价值；
jQuery（#qty”）.on（“change”，function（）{
数量=此值；
价格=数量*8.50；
jQuery（“#price”）.val（price.toFixed（））；
updateTotal（）；
}); 
jQuery（#qty1”）.on（“change”，function（）{
qty1=该值；
价格1=qty1*9.50；
jQuery（“#price1”）.val（price1.toFixed（））；
updateTotal（）；
});
函数updateTotal（）{
//计算价格总额
var priceofItem1=parseFloat（价格）| 0；
var priceofItem2=parseFloat（price1）| 0；
var合计=项目1的价格+项目2的价格；
//计算项目总数
var quantityofItem1=parseFloat（数量）| | 0；
var quantityofItem2=parseFloat（qty1）| 0；
var totalQuantity=项目1的数量+项目2的数量；
jQuery（“#items”）.val（总数量）；
jQuery（“#总计”）.val（总计）；
}

从一系列优质面包中选择
产品1






产品2





总价

您好，谢谢您的帮助。我也需要一些东西。此外，该字段不应为必填字段。客户也应该能够输入一个产品。你也能帮我吗？我已经更新了答案，也更新了数量之和。请查收，谢谢，罗宾。但这两种产品的价格字段都是强制性的。它没有显示产品1的总价格。此外，该代码在fiddle中运行良好，但在我的网站上不起作用。我已经修复了必需的东西。你能告诉我如何让它在我的网站上运行吗？它在那里不起作用。

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

});

});