Using jQuery to sum values from a couple text inputs

Question

I have a couple of text inputs and I would like to compute the sum of the values in another input. This must happen on the fly, as soon as the user enters a value in one of the inputs. I'm planning to use jQuery for this, and I would like to add a class name for each input, something like class="input1", class="input2" and so on.

My problem is that I don't know to add all those values, and given the fact that I have over 50 inputs, I don't want to "add them by hand".

Any kind of help is appreciated.

Why increment the number on the classes, just give all the inputs the same class, it makes selecting them easier and the selector will perform much faster? — Jasper
– Jasper, Commented Dec 17, 2011 at 18:58
@Psyche - I agree with Jasper - if making all the inputs you want summed have the same class name is possible, that will definitely make things cleaner. — Adam Rackis
– Adam Rackis, Commented Dec 17, 2011 at 19:06

Adam Rackis · Accepted Answer · 2011-12-17 19:00:53Z

4

If you decorate all of the inputs you want added together with classes of input1, input2, and so on, this will get the sum of the current values in all those inputs

var sum = 0;

$("input[class *= 'input']").each(function(){
    sum += +$(this).val();
});

Then naturally if you want to put this value in an input of id destination

$("#destination").val(sum);

Here's a fiddle

EDIT

If you want this to run whenever any of these textboxes are changed, then you can put this in a change event handler

$(document).on("change", "input[class *= 'input']", function() {
    var sum = 0;

    $("input[class *= 'input']").each(function(){
        sum += +$(this).val();
    });

    $("#destination").val(sum);
});

Here's that fiddle

EDIT

Per Jaspers comment, if you know that input1, input2, etc, will always be the first class on your inputs, ie, you'll never do

<input class='someNewClass input1'

then you could

$("input[class ^= 'input']").each(function(){

^= means starts with, while *= means contains anywhere.

edited Dec 17, 2011 at 19:00

answered Dec 17, 2011 at 18:45

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

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

9 Comments

Jasper Over a year ago

Wouldn't [class ^= 'input'] be a bit more appropriate, to match the beginning of the string rather than anywhere in the string?

Adam Rackis Over a year ago

@Jasper - potentially, yes. But if OP ever decides to do <input class='someNewClass input1' that would break

Psyche Over a year ago

@AdamRackis, I made a little edit to the post because I would like to sum to be computed on the fly, after the user enters a value in one of those inputs.

Adam Rackis Over a year ago

@Psyche Are you using jquery 1.7?

Adam Rackis Over a year ago

@Psyche - here's the old-school way to do it for older jQuery versions $(document).delegate("input[class *= 'input']", "change", function() {...

|

dku.rajkumar · Accepted Answer · 2011-12-17 19:17:03Z

1

give them a common name and you need to parse the value since it will be text initially

var result= 0;

$("input[name='sum']").each(function(){
    result = result + parseInt($(this).val(),10);
});

edited Dec 17, 2011 at 19:17

answered Dec 17, 2011 at 19:00

dku.rajkumar

18.6k8 gold badges43 silver badges58 bronze badges

2 Comments

Adam Rackis Over a year ago

I'll +1 this if you add a radix parameter to your parseInt call.

dku.rajkumar Over a year ago

i was thinking while typing but then missed it. Thanks :)

Collectives™ on Stack Overflow

Using jQuery to sum values from a couple text inputs

2 Answers 2

9 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related