Faizal Faizal - 2 months ago 20
Javascript Question

Increase and decrease values for inputs using jquery

I need to increase and decrease the value of inputs when clicking the + and - buttons but it doesn't seem to work. I got the code from this post: How to increase the value of a quantity field with jQuery? When clicking on the add button, I inserted a console.log statement for debugging purposes and surprisingly, I get a value of 3 even though I clicked on a button with an id of add1. Would really appreciate it if you could point out to me the error, thanks!

HTML:

<body>
<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20">
<input id="qty1" type="text" value="1">
<img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
</p>

<p>
<img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20">
<input id="qty2" type="text" value="1">
<img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20">
</p>
</body>


jQuery:

$(function () {
var numButtons = 2;
//console.log(typeof(numButtons));
//console.log(numButtons);
for (var i = 1; i <= numButtons; i++) {

$("#add" + i).click(function () {
console.log(i);
var currentVal = parseInt($("#qty" + i).val());
//console.log(currentVal);
if (!isNaN(currentVal)) {
$("#qty" + i).val(currentVal + 1);
}
});

$("#minus" + i).click(function () {
var currentVal = parseInt($("#qty" + i).val());
if (!isNaN(currentVal) && currentVal > 0) {
$("#qty" + i).val(currentVal - 1);
}
});
}
});


jsfiddle - http://jsfiddle.net/hMS6Y/

Answer

Try this in a simple way using class,

HTML

<body>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus1" width="20" height="20" class="minus"/>
        <input id="qty1" type="text" value="1" class="qty"/>
            <img id="add1" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/>
    </p>
    <p>
        <img src="http://i.imgur.com/yOadS1c.png" id="minus2" width="20" height="20" class="minus"/>
        <input id="qty2" type="text" value="1" class="qty"/>
        <img id="add2" src="http://i.imgur.com/98cvZnj.png" width="20" height="20" class="add"/>
    </p>
</body>

SCRIPT

$(function () {
    $('.add').on('click',function(){
        var $qty=$(this).closest('p').find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal)) {
            $qty.val(currentVal + 1);
        }
    });
    $('.minus').on('click',function(){
        var $qty=$(this).closest('p').find('.qty');
        var currentVal = parseInt($qty.val());
        if (!isNaN(currentVal) && currentVal > 0) {
            $qty.val(currentVal - 1);
        }
    });
});

Fiddle: http://jsfiddle.net/hMS6Y/2/