CODEWITHSUNDEEP
javascriptjquerycalculation
anipard
anipard

Reputation: 164

How do I calculate subtotals and total using jQuery?

I have this form that I need to calculate items in 2 sub totals, and sum those sub totals into one total number.

I can only get sum for subTotal1 and subTotal2, but total calculation was failed, because it, I don't have a clue to calculate mean numbers (not the formula, but the JavaScript code).

Here's my code:

$(document).on("change", ".qty1", function() {
  var sum = 0;
  $(".qty1").each(function() {
    sum += +$(this).val();
  });
  $(".subTotal1").val(sum);
});
$(document).on("change", ".qty2", function() {
  var sum = 0;
  $(".qty2").each(function() {
    sum += +$(this).val();
  });
  $(".subTotal2").val(sum);
});
// Doesn't work
$(document).on("change", ".subTotal", function() {
  var sum = 0;
  $(".subTotal").each(function() {
    sum += +$(this).val();
  });
  $(".total").val(sum / 2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="./">
  Shoes 1: <input type="number" name="shoes1" class="qty1"><br> 
  Shoes 2: <input type="number" name="shoes2" class="qty1"><br> 
  Shoes 3: <input type="number" name="shoes3" class="qty1"><br> 
  Sub total: <input type="number" name="subTotal1" class="subTotal1 subTotal"><br><br> 
  Sandals 1: <input type="number" name="sandals1" class="qty2"><br> 
  Sandals 2: <input type="number" name="sandals2" class="qty2"><br> 
  Sandals 3: <input type="number" name="sandals3" class="qty2"><br> 
  Sub total: <input type="number" name="subTotal2" class="subTotal2 subTotal"><br><br> 
  Total: <input type="number" name="total" class="total"><br><br> 
  Mean (50% Shoes + 50% Sandals ) / 2: <input type="number" name="mean" class="mean"><br>
  <input type="submit" value="Submit">
</form>

Upvotes: 0

Views: 2560

Answers (1)

Kartik Prasad
Kartik Prasad

Reputation: 740

The document isn't detecting changes done by javascript only the user or else you'll go through some infinite loops. so just call the function when you are done calculating the subtotals

	$(document).on("change", ".qty1", function() {
	    var sum = 0;
	    $(".qty1").each(function(){
	        sum += +$(this).val();
	    });
	    $(".subTotal1").val(sum);
            calcTotal();
	});
	$(document).on("change", ".qty2", function() {
	    var sum = 0;
	    $(".qty2").each(function(){
	        sum += +$(this).val();
	    });
	    $(".subTotal2").val(sum);
            calcTotal();
	});
	// Does work
	function calcTotal() {
	    var sum = 0;
	    $(".subTotal").each(function(){
	        sum += +$(this).val();
	    });
	    $(".total").val(sum);
            $(".mean").val(sum/2);
	};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="./">
 		Shoes 1: <input type="number" name="shoes1" class="qty1"><br>
	    Shoes 2: <input type="number" name="shoes2" class="qty1"><br>
	    Shoes 3: <input type="number" name="shoes3" class="qty1"><br>
	    Sub total: <input type="number" name="subTotal1" class="subTotal1 subTotal"><br>
	    <br>
	    Sandals 1: <input type="number" name="sandals1" class="qty2"><br>
	    Sandals 2: <input type="number" name="sandals2" class="qty2"><br>
	    Sandals 3: <input type="number" name="sandals3" class="qty2"><br>
	    Sub total: <input type="number" name="subTotal2" class="subTotal2 subTotal"><br>
	    <br>
	    Total: <input type="number" name="total" class="total"><br>
	    <br>
	    Mean (50% Shoes + 50% Sandals ) / 2: <input type="number" name="mean" class="mean">
	    <br>
		<input type="submit" value="Submit">
 	</form>

Upvotes: 2

Related Questions