What I need I want to sum all to amount as the images but I can't do it
As below code how can to total all amount after quantity multiple with unitPrice?
Here is Html element
<html> <form> <div> Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit"> Amount: <input type='text' class='amount'> </div> <div> Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit"> Amount: <input type='text' class='amount'> </div> <div> Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit"> Amount: <input type='text' class='amount'> </div> <div> Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit"> Amount: <input type='text' class='amount'> </div> <div> Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit"> Amount: <input type='text' class='amount'> </div> <div> Quantity:<input type="text" class="qty"> Unit price:<input type="text" class="unit"> Amount: <input type='text' class='amount'> </div> Total All:<input type="text" class="result"> </form> </html>Here is Javascript code This js can only total from unit price with quantity like amount = quant*unit
And result should be Result = amount+amount1+amount2+amount3+amount4+amount5. But i can't do that
<script> $(document).ready(function(){ $('.qty,.unit').on('change', function(){ var qty = parseFloat($('.quant').val() ); var unit = parseFloat( $('.unit_p').val()); var quant1 = parseFloat($('.quant1').val() ); var unit1 = parseFloat( $('.unit1').val()); var quant2 = parseFloat($('.quant2').val() ); var unit2 = parseFloat( $('.unit2').val()); var quant3 = parseFloat($('.quant3').val() ); var unit3 = parseFloat( $('.unit3').val()); var quant4 = parseFloat($('.quant4').val() ); var unit4 = parseFloat( $('.unit4').val()); var quant5 = parseFloat($('.quant5').val() ); var unit5 = parseFloat( $('.unit5').val()); var amount = qty * unit; var amount1 = quant1*unit1; var amount2 = quant2*unit2; var amount3 = quant3*unit3; var amount4 = quant4*unit4; var amount5 = quant5*unit5; var result = []; if(isNaN(qty) || isNaN(unit)){ $('.amount').val(''); }else{ $('.amount').val(amount); }if(isNaN(quant1)||isNaN(unit1)){ $('.amount1').val(''); }else{ $('.amount1').val(amount1); }if(isNaN(quant2) || isNaN(unit2)){ $('.amount2').val(''); }else{ $('.amount2').val(amount2); }if(isNaN(amount3) || isNaN(amount3)){ $('.amount3').val(''); }else{ $('.amount3').val(amount3); }if(isNaN(quant4) || isNaN(unit4)){ $('.amount4').val(''); }else{ $('.amount4').val(amount4); }if(isNaN(quant5)||isNaN(quant5)){ $('.amount5').val(''); }else{ $('.amount5').val(amount5); } }); </script>I can't sum all amount for total
Please help
asked Dec 23, 2014 at 9:34
Cootel KhCootel Kh
971 gold badge3 silver badges15 bronze badges
3
You need to change your html to this:
and so you can update your jquery code as following:
$(function () { $('.unit,.qty').on('change', function () { var unit = $(this).hasClass('unit') ? $(this).val() : $(this).siblings('.unit').val(); var qty = $(this).hasClass('qty') ? $(this).val() : $(this).siblings('.qty').val(); unit = unit || 0; qty = qty || 0; var val = unit >= 1 && qty >= 1 ? parseFloat(unit * qty) : 0; $(this).siblings('.amount').val(val); var total = 0; var update = false; $('.amount').each(function () { val = parseFloat($(this).val()) | 0; total = val ? (parseFloat(total + val)) : total; }); $('.result').val(total); }); });answered Dec 23, 2014 at 9:48
SayedSayed
5723 silver badges20 bronze badges
11
Another approach will be done by this
Whenever user enter quantity / unit on change event will calculate and set amount value.
Later call fnAlltotal() function which update the result textbox with totalAmount
$(".qty").on('input', function () { var self = $(this); var unitVal = self.next().val(); self.next().next().val(unitVal * self.val()); fnAlltotal(); }); $(".unit").on('input', function () { var self = $(this); var qtyVal = self.prev().val(); self.next().val(qtyVal * self.val()); fnAlltotal(); }); function fnAlltotal() { var total = 0 $(".amount").each(function () { total += parseFloat($(this).val() || 0); }); $(".result").val(total); }WORKING DEMO
answered Dec 23, 2014 at 10:50
Satinder singhSatinder singh
9,83416 gold badges58 silver badges99 bronze badges
1
Following should work, you have forgot to write code for addition
$('.quant, .unit_p, .unit1, .unit2, .unit3, .unit4, .unit5, .quant1, .quant2, .quant3, .quant4, .quant5').on('change', function(){ var qty = parseFloat($('.quant').val() ); var unit = parseFloat( $('.unit_p').val()); var quant1 = parseFloat($('.quant1').val() ); var unit1 = parseFloat( $('.unit1').val()); var quant2 = parseFloat($('.quant2').val() ); var unit2 = parseFloat( $('.unit2').val()); var quant3 = parseFloat($('.quant3').val() ); var unit3 = parseFloat( $('.unit3').val()); var quant4 = parseFloat($('.quant4').val() ); var unit4 = parseFloat( $('.unit4').val()); var quant5 = parseFloat($('.quant5').val() ); var unit5 = parseFloat( $('.unit5').val()); var amount = qty * unit; var amount1 = quant1*unit1; var amount2 = quant2*unit2; var amount3 = quant3*unit3; var amount4 = quant4*unit4; var amount5 = quant5*unit5; var result = []; if(isNaN(qty) || isNaN(unit)){ $('.amount').val(''); }else{ $('.amount').val(amount); }if(isNaN(quant1)||isNaN(unit1)){ $('.amount1').val(''); }else{ $('.amount1').val(amount1); }if(isNaN(quant2) || isNaN(unit2)){ $('.amount2').val(''); }else{ $('.amount2').val(amount2); }if(isNaN(amount3) || isNaN(amount3)){ $('.amount3').val(''); }else{ $('.amount3').val(amount3); }if(isNaN(quant4) || isNaN(unit4)){ $('.amount4').val(''); }else{ $('.amount4').val(amount4); }if(isNaN(quant5)||isNaN(quant5)){ $('.amount5').val(''); }else{ $('.amount5').val(amount5); } $('.result').val((amount + amount1 + amount2 + amount3 + amount4 + amount5)); });answered Dec 23, 2014 at 9:47
Mohammad AshfaqMohammad Ashfaq
1,3232 gold badges14 silver badges37 bronze badges
1
Add a class to all of the 3rd column input fields of subTotal. It is then as simple as writing a function to complete this task for you.
var calculateTotal = function() { var total = 0; $.each($('.subTotal'), function(index, element) { total += $(element).val(); }); return total; };Then write a function to set the value of the element.
var updateTotal = function () { $('#grandTotal').val(calculateTotal()); }Now whenever the user modifies any values causing the total to change, you can trigger the updateTotal() method.
answered Dec 23, 2014 at 9:50
ONDoubleBONDoubleB
3201 silver badge10 bronze badges