Make this increment/decrement work with multiple inputs in jQuery

Question

I am having a bit of trouble selecting an input. Basically, I need the button to increase or decrease the value of a single input contained in the same element.

Here's the HTML:

<div>
    <label for="name">Adult Males</label>
    <div class="dec button">-</div>
    <input type="text" name="qty" id="1" value="0" />
    <div class="inc button">+</div>
</div>
<div>
    <label for="name">Adult Females</label>
    <div class="dec button">-</div>
    <input type="text" name="adult-female" id="2" value="0"/>
    <div class="inc button">+</div>
</div>

...and the jQuery:

var incrementVar = 0;

$(function() {
    $(".inc").click(function() {
        var newValue = parseInt($(":input[name='qty']").val()) + 1;
        $(":input[name='qty']").val(newValue);
        $('.inc').addClass('a' + newValue);
        incrementVar = incrementVar + newValue;
    });
    $(".dec").click(function() {
        var newValue = parseInt($(":input[name='qty']").val()) - 1;
        $(":input[name='qty']").val(newValue);
        $('.inc').addClass('a' + newValue);
        incrementVar = incrementVar + newValue;
    });
});

This works, but only for adult-males at the moment. I want the button to target the input contained in the same div.

score 4 · Accepted Answer · answered Sep 12 '11 at 08:03

incrementVar = 0;
$('.inc.button').click(function(){
    var $this = $(this),
        $input = $this.prev('input'),
        $parent = $input.closest('div'),
        newValue = parseInt($input.val(), 10)+1;
    $parent.find('.inc').addClass('a'+newValue);
    $input.val(newValue);
    incrementVar += newValue;
});
$('.dec.button').click(function(){
    var $this = $(this),
        $input = $this.next('input'),
        $parent = $input.closest('div'),
        newValue = parseInt($input.val(), 10)-1;
    $parent.find('.inc').addClass('a'+newValue);
    $input.val(newValue);
    incrementVar += newValue;
});

Demo

jfriend00 · Answer 2 · 2011-09-12T07:59:59.170

Here's some code that will do that for you. The key is to go up to the parent of the button that's clicked and find the input that's in that parent. That will get you the right one to operate on. I also made these changes/improvements:

I put all the code in a function that both increment and decrement can call.
I added the radix to parseInt() which is required unless you want it to guess.
I made it so the decrement can't make it go below zero.
I fixed the id values on the input elements to be legal values (an id can't start with an number).

Here's the new code:

$(".inc").click(function() {
    updateValue(this, 1);
});
$(".dec").click(function() {
    updateValue(this, -1);
});

function updateValue(obj, delta) {
    var item = $(obj).parent().find("input");
    var newValue = parseInt(item.val(), 10) + delta;
    item.val(Math.max(newValue, 0));
}

Working example here: http://jsfiddle.net/jfriend00/Y6tFj/

I removed the class changes as they didn't make sense to me because you're constantly adding new classes to all the increment/decrement buttons which I don't think is accomplishing whatever you were trying to do.

I also didn't know what you were trying to do with the incrementVar.

Xenethyl · Answer 3 · 2011-09-12T07:58:25.730

0

Your input element inside the adult female section is named adult-female and not qty. You can adjust your selector to use jQuery's next ala $(this).next(":input").

edited Sep 12 '11 at 07:58

answered Sep 12 '11 at 07:52

Xenethyl

3,179
21
31

score 0 · Answer 4 · edited Jan 14 '12 at 17:58

0

Use

 var newValue = parseInt( $(this).prev(":input[name='qty']").val()) + 1;

instead of

 var newValue = parseInt($(":input[name='qty']").val()) + 1;

and

use

 var newValue = parseInt( $(this).next(":input[name='qty']").val()) - 1;

instead of

 var newValue = parseInt($(":input[name='qty']").val()) - 1;

Ref:

edited Jan 14 '12 at 17:58

Peter Mortensen

30,738
21
105
131

answered Sep 12 '11 at 07:52

Kanishka Panamaldeniya

17,302
31
123
193

score 0 · Answer 5 · answered Sep 12 '11 at 07:54

0

You can use the prev() and next() the find the element, instead of using selector.

See it in action: http://jsfiddle.net/william/t4Np7/1/.

answered Sep 12 '11 at 07:54

William Niu

15,798
7
53
93

score 0 · Answer 6 · answered Sep 12 '11 at 07:58

0

You can use :

var input = $(this).siblings(":input[name='qty']").get(0)

and then

var newValue = parseInt(input.value) + 1;
$(input).val(newValue);

answered Sep 12 '11 at 07:58

Aditya Manohar

2,204
1
17
20

Make this increment/decrement work with multiple inputs in jQuery

6 Answers6

Demo