Increase and decrease values for inputs using jquery
Question
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/
6 answers
solution1
12 ACCPTED 2013-10-02 04:20:45
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>
solution2
1 2013-10-02 04:29:16
The issue at hand is that the value of i is 3 by the time the loop ends. What you want to do is save the value of each iteration so that when the click event fires it will still hold the correct value (the value at the time of the event being wired up). One way to do this is with what are called closures. Closures basically close around the value and save the function call with the value used to be called later. One way to accomplish this is with a function factory.
function add(value){
console.log(value);
var currentVal = parseInt($("#qty" + value).val());
if (!isNaN(currentVal)) {
$("#qty" + value).val(currentVal + 1);
}
};
function addClosure(value){
return function(){
add(value);
};
};
At this point all you need to do is change the click event as follows:
$("#add" + i).click(addClosure(i));
JSFiddle: http://jsfiddle.net/infiniteloops/y9huk/
MDN Closures: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures
solution3
0 2013-10-02 04:18:26
Your variable i is global in the case it will actually work for #add3, #minus3. Here in code you can try this thing-
$(function () {
var numButtons = 2;
//console.log(typeof(numButtons));
//console.log(numButtons);
for (var i = 1; i <= numButtons; i++) {
var t = i; //Now t is local
$("#add" + t).click(function () {
console.log(t);
var currentVal = parseInt($("#qty" + t).val());
//console.log(currentVal);
if (!isNaN(currentVal)) {
$("#qty" + t).val(currentVal + 1);
}
});
$("#minus" + t).click(function () {
var currentVal = parseInt($("#qty" + t).val());
if (!isNaN(currentVal) && currentVal > 0) {
$("#qty" + t).val(currentVal - 1);
}
});
}
});
Hope this will help.
solution4
0 2013-10-02 04:20:17
in for loop i value become 3
$(function () {
$("#add1").click(function () {
add(1);
});
$("#minus1").click(function () {
minus(1);
});
$("#add2").click(function () {
add(2);
});
$("#minus2").click(function () {
minus(2);
});
});
function add(i){
var currentVal = parseInt($("#qty" + i).val());
if (!isNaN(currentVal)) {
$("#qty" + i).val(currentVal + 1);
}
}
function minus(i){
var currentVal = parseInt($("#qty" + i).val());
if (!isNaN(currentVal) && currentVal > 0) {
$("#qty" + i).val(currentVal - 1);
}
}
solution5
0 2013-10-02 04:40:58
Working code.
<body>
<div id='placeholder'>
<p>
<img src="http://i.imgur.com/yOadS1c.png" act='min' id="1" width="20" height="20" />
<input id="qty1" type="text" value="1">
<img src="http://i.imgur.com/98cvZnj.png" act='add' id="1" width="20" height="20" />
</p>
<p>
<img src="http://i.imgur.com/yOadS1c.png" act='min' id="2" width="20" height="20" />
<input id="qty2" type="text" value="1">
<img src="http://i.imgur.com/98cvZnj.png" act='add' id="2" width="20" height="20" />
</p>
</div>
</body>
$(function () {
$('#placeholder img').each(function(){
$(this).click(function(){
$action = $(this).attr('act');
$id = $(this).attr('id');
$val = parseInt($('#qty'+$id).val());
if($action == 'add'){
$val = $val + 1;
} else {
if($val > 0){
$val = $val - 1;
}
}
$('#qty'+$id).val($val);
});
});
});
solution6
0 2016-10-05 22:44:31
<div class="box-qty">
<a href="javascript:void(0);" class="quantity-minus">-</a>
<input type="text" name="p_quantity" id="qnt" class="quantity" value="1">
<a href="javascript:void(0);" class="quantity-plus">+</a>
</div>
<script>
$(".quantity-plus").click(function(){
$("#qnt").val(Number($("#qnt").val())+1);
});
$(".quantity-minus").click(function(){
if($("#qnt").val()>1)
$("#qnt").val(Number($("#qnt").val())-1);
});
<script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.