Count multiple values with jquery

Question

I am trying to create counting function with jquery.

I have multiple sets of inputs with numbers determined, something like:

<input class="price" type="hidden" name="price" value="4">
<input class="count" type="text" name="count" maxlength="4">

I want to create script that will count all inputs, eg.

 (price * count) + (price * count) etc..

So far i came up with this script, which multiplies and displays only one input

$('.count').blur(function() {
    var amount = parseFloat($(this).val());
    var price = $(this).closest('tr').find('.price');
    var result = parseFloat((price).val());
    var money = (amount * result)
    $('.money').text(money);
});

Could you add a more complete HTML example - we need to see how your .price and .count elements are grouped in order to iterate over them. — Rory McCrossan
– Rory McCrossan, Commented May 9, 2015 at 11:30

Arun P Johny · Accepted Answer · 2015-05-09 11:31:16Z

1

You need to use a loop inside your blur handler like

var $counts = $('.count').blur(function () {
    var money = 0;
    $counts.each(function () {
        money += (+this.value * $(this).closest('tr').find('.price').val()) || 0
    });

    $('.money').text(money);
});

Demo: Fiddle

answered May 9, 2015 at 11:31

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Count multiple values with jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related