0

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

3
  • It seems that You have not written code for doing grand total Dec 23, 2014 at 9:44
  • can cut your code down significantly by simply wrapping each row and looping though all the rows. Give all similar fields the same class (price, qty, subtotal)
    – charlietfl
    Dec 23, 2014 at 9:46
  • I'm guessing that your problem is the fact that the amountX variables you are trying to add up may not contain numbers in some cases. Since you already have checks for that in place, I suggest adding the amountX variables to result in the same place you're setting the value of the input fields
    – icke
    Dec 23, 2014 at 9:46

4 Answers 4

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);
  });
});
11
  • $Marcus, It work if I input all unit and quantity if I don't input value to all unit and quantity Total All will show NAN? So How can make it better than this And I also thanks for your help
    – Cootel Kh
    Dec 23, 2014 at 9:59
  • lines unit || 0 and qty || 0 can be changed to a more explanatory logic. It's just a shortcut for adding the result with zero.
    – Sayed
    Dec 23, 2014 at 10:03
  • You Know when I input value to the first input element and next to second input element and I don't input value to other input element and Total all don't receive the value, Total All will receive value after I complete all input element, this is not what i want
    – Cootel Kh
    Dec 23, 2014 at 10:09
  • 1
    I'll update the code in a minute. Just let me know on what event do you want to calculate the sum of all amounts?
    – Sayed
    Dec 23, 2014 at 10:12
  • I want Total All calculate all the value of amount when amount get value from quantity*unit.And I don't expected All input element have to complete all mean that we have 5 element of amount so i one amount of them get value Total All would get value from amount and Total All will calculate the two of amount and if amount1,amount2,amount3 get value and total All should be Total = amount1+amount2+amount3. and other two of amount let empty is ok
    – Cootel Kh
    Dec 23, 2014 at 10:19
1

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

1
  • signh Why it doesn't work when I put it inside table tag <table> <tbody> <td></td> <td><?php echo form_textarea('descr',set_value('descr1',''),'class="descriptoin my-form-control"')?></td> <td></td> <td><?php echo form_input('vat',set_value('',''), 'class="qty"')?></td> <td><?php echo form_input('vat',set_value('',''), 'class="unit"')?></td> <td><?php echo form_input('vat',set_value('',''), 'class="amount" readonly')?>$</td> </tr> </tbody> </table>
    – Cootel Kh
    Dec 24, 2014 at 3:26
0

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));
});
1
  • 1
    this isn't an answer. There is no explanation, no comments, just a big blob of code
    – charlietfl
    Dec 23, 2014 at 9:49
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.