jQuery: How to subtract numeric values of each text input field in an array from that of a corresponding array?

Question

I have two sets of of input fields like this, differentiated by their classes:

<div>
<input type="text" class="columnone" />
<input type="text" class="columnone" />
<input type="text" class="columnone" />
</div>

<div>
<input type="text" class="columntwo" />
<input type="text" class="columntwo" />
<input type="text" class="columntwo" />
</div>

Necessary validations are in place to ensure that only integer values can be input by the user into these fields.

How do I subtract the value of each input field in .columntwo from the value in the corresponding field in .columnone on change() in that particular .columntwo text field? Null values should be considered zero.

For example, on change() in the first input field in columntwo, subtract the value of the first input field in .columntwo from the first field in .columntwo. Other fields remain unchanged.

Thanks in advance!

Don't you want to add the classes columnone and columntwo to the wrapping div,s instead of to each input element? — Justus Romijn
– Justus Romijn, Commented May 24, 2011 at 7:14

Freek · Accepted Answer · 2011-05-24 08:33:26Z

3

Under the assumption that you don't have any other elements with class columnone or columntwo, you can do

$('input.columntwo').change(function() {
    var $this = $(this);
    $this.val(parseInt($('input.columnone').eq($this.index()).val(),10) - parseInt($this.val(),10));
});

edited May 24, 2011 at 8:33

answered May 24, 2011 at 7:08

Freek

1,5561 gold badge12 silver badges25 bronze badges

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

2 Comments

xkeshav Over a year ago

+1 for simple and fast solution . use parseFloat instead 'parseInt`

Stroller Over a year ago

Thanks. This doesn't seem to be working when I prefix line 3 with 'var difference =' and then 'alert(difference);'

JohnP · Accepted Answer · 2011-05-24 07:14:34Z

2

This is a bit convoluted, but it will work. This works on the assumption that you want to trigger the function both ways (columntwo and columnone)

$('.columnone, .columntwo').change(function() {
    var $this = $(this);
    var sum = 0;
    var index = $this.index();

    if ($this.hasClass('columnone')) {
        var val1 = parseInt($this.val(), 10);
        var val2 = parseInt($('.columntwo:eq(' + index + ')').val(), 10);
    } else {
        var val2 = parseInt($this.val(), 10);
        var val1 = parseInt($('.columnone:eq(' + index + ')').val(), 10);
    }

    val1 = (isNaN(val1)) ? 0 : val1;
    val2 = (isNaN(val2)) ? 0 : val2;

    sum = val2 - val1;
    //console.log(sum);
    alert(sum);
});

Here's the fiddle : http://jsfiddle.net/fJLAw/

answered May 24, 2011 at 7:14

JohnP

50k13 gold badges112 silver badges142 bronze badges

3 Comments

JohnP Over a year ago

@diEcho Yup, but I used parseInt because the OP mentioned integers.

Stroller Over a year ago

When I use this, all .columntwo values are always being subtracted from the first input field of .columnone.

JohnP Over a year ago

@Stroller do you mean in the fiddle or in your code? The fiddle works fine for me

Collectives™ on Stack Overflow

jQuery: How to subtract numeric values of each text input field in an array from that of a corresponding array?

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related