Menghitung total dan subtotal pada javascript

Question

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:

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

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

kode javascript

Menghitung total dan subtotal pada javascript

Pos Terkait

Periklanan

BERITA TERKINI

Toplist Popular

Periklanan

Terpopuler

Token Data

Periklanan

Tentang Kami

Legal

Dukungan

Social