Question

174

Jquery calculate sub total from fields - qty and price by class and grand Total sum

rated 0 times [ 181] [ 7] / answers: 1 / hits: 19797 / 10 Years ago, wed, february 26, 2014, 12:00:00

I have prepared this jsfiddle

The problem is that I have many rows containing product qty * price = sub total
This also must dynamically calculate grand total for all sub total amounts. And the biggest problem is the trigger since we may not have change trigger on the qty select fields.. really complicated for me.
I am so far stacked here:

$(document).ready(function() {    

    var qty=$('.qty').val();

    var price = $('.price').val();

    var sum = 0;



    $('.amount').each(function() {

        sum += parseFloat($(this).text());

    });

});

Please give me idea for:

Which trigger to use so it can calculate on page load as well and if qty dropdown is changed too.

How to calculate each row first

thank you for your help and time in advance!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

terrence

Add To Favorites

Follow

Total Points: 120

Total Questions: 115

Total Answers: 87

Location: England

Member since Fri, May 22, 2020

4 Years ago

terrence questions

1 Cannot read properties of undefined (reading 'toHexString') in ether.js

Sun, Mar 13, 22, 00:00, 2 Years ago

1 Javascript Remove Focus on Enter Key Press

Sat, Jun 5, 21, 00:00, 3 Years ago

1 Implementing Lodash's debounce in a ReactJS functional component

Mon, Aug 31, 20, 00:00, 4 Years ago

1 How to customize mat select option group to allow nested values in angular

Thu, Jul 23, 20, 00:00, 4 Years ago

1 Read file component (fs.readFile)

Wed, Jun 17, 20, 00:00, 4 Years ago

View All

answered 10 Years ago ellisc · Accepted Answer

You have your answer here: http://jsfiddle.net/kY98p/10/

I changed the html to use the tags thead and tfoot for header and footer

Its just a cycle over the lines where you get the quantity and price and update the amount...

Here is the function that you should call:

function update_amounts()

{

    var sum = 0.0;

    $('#myTable > tbody  > tr').each(function() {

        var qty = $(this).find('option:selected').val();

        var price = $(this).find('.price').val();

        var amount = (qty*price)

        sum+=amount;

        $(this).find('.amount').text(''+amount);

    });

    //just update the total to sum  

    $('.total').text(sum);

}

And the event that you need is:

$('.qty').change(function() {

    update_amounts();

});

UPDATE: jsfiddle with total: http://jsfiddle.net/kY98p/11/