Menu
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/
793
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/
Alternatively, you can short your code like,
$(function() {
$('.minus,.add').on('click', function() {
var $qty = $(this).closest('p').find('.qty'),
currentVal = parseInt($qty.val()),
isAdd = $(this).hasClass('add');
!isNaN(currentVal) && $qty.val(
isAdd ? ++currentVal : (currentVal > 0 ? --currentVal : currentVal)
);
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
