CODEWITHSUNDEEP
javascriptjquery
Cootel Kh
Cootel Kh

Reputation: 97

How to calculate subtotal and grand total in javascript?

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

enter image description here

Upvotes: 0

Views: 15166

Answers (4)

Satinder singh
Satinder singh

Reputation: 10208

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

Upvotes: 1

Sayed
Sayed

Reputation: 631

You need to change your html to this:

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

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

Upvotes: 3

ONDoubleB
ONDoubleB

Reputation: 330

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.

Upvotes: 0

Mohammad Ashfaq
Mohammad Ashfaq

Reputation: 1375

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

Upvotes: 0

Related Questions