CODEWITHSUNDEEP
jquerywordpress
Sargam Gupta
Sargam Gupta

Reputation: 83

How to add values of two fields and show it into third with Jquery

I am creating a order form. Price will be calculated for each product based on quantity. This calculation is working. Once the customer selects the quantity for products. Total No. Items and Total Price must show up. I am not able to do calculation for addition. Can somebody help? Below is the code and screenshot.

enter image description here

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

});

});

Upvotes: 1

Views: 130

Answers (1)

Robin
Robin

Reputation: 32

If you want to show the sum of prices for the 2 items in the #total input box, then you can probably do something like below.

You should keep the code that updates the total in a separate function and then invoke that function whenever any of the 2 item's quantity is changed.

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

Upvotes: 2

Related Questions