I am clicking + up to ’35’ then I click the add button. I want it to print the result: ’35’. If I continue clicking incrementing it up to ’40’ and then pressing again the add button I need the code to print the result as ’40’.
However that is not what my code is doing. Could you give me a hand?
$('.dec').click(function() {
var inputValue = $(this).next().val();
var newValue = parseInt(inputValue) - 1;
if (newValue >= 30) {
$(this).next().val(newValue);
}
});
$('.inc').click(function () {
$(this).prev().val(+$(this).prev().val() + 1);
});
function extraDish(extradishPrice, extraID, extraTitle) {
var extraDishcount = $('.extraDishcount').val();
console.log(extraDishcount);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-6 pb-6">
<div class="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm">
<div class="p-3 position-relative">
<div class="list-card-body">
<h5 class="mb-1 text-center fw-bold"><a href="#" class="text-black extraTishTitle">Raja</a></h5>
</div>
</div>
<div class="row">
<div class="col-md-12 float-end">
<div class="d-flex p-3">
<span class="count-number">
<button type="button" class="btn-sm left dec btn btn-outline-secondary">
<i class="feather-minus">-</i>
</button>
<input class="count-number-input extraDishcount" id="extraDishcount" name="extraDishcount" type="text" value="30" readonly="">
<button type="button" class="btn-sm right inc btn btn-outline-secondary">
<i class="feather-plus">+</i>
</button>
</span>
<span class="ms-auto">
<button type="button" onclick="extraDish('1.00','27','Tofu Sambal (+$1.00)')" class="btn btn-outline-secondary btn-sm buttonAdd">ADD</button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 pb-6">
<div class="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm">
<div class="p-3 position-relative">
<div class="list-card-body">
<h5 class="mb-1 text-center fw-bold"><a href="#" class="text-black extraTishTitle">Malar</a></h5>
</div>
</div>
<div class="row">
<div class="col-md-12 float-end">
<div class="d-flex p-3">
<span class="count-number">
<button type="button" class="btn-sm left dec btn btn-outline-secondary">
<i class="feather-minus">-</i>
</button>
<input class="count-number-input extraDishcount" id="extraDishcount" name="extraDishcount" type="text" value="30" readonly="">
<button type="button" class="btn-sm right inc btn btn-outline-secondary">
<i class="feather-plus">+</i>
</button>
</span>
<span class="ms-auto">
<button type="button" onclick="extraDish('0.80','30','Sambal Goreng ($0.80)')" class="btn btn-outline-secondary btn-sm buttonAdd">ADD</button>
</span>
</div>
</div>
</div>
</div>
</div>
>Solution :
There’s a few issues in your code, and some things which can be improved.
- Remove the line
$('.extraDishcount').val(pax);;as this is setting the the same value in all inputs whenever you increment the value - Remove the duplicate
idattributes in your HTML. These values must be unique and cannot be repeated. - Traverse the DOM to find the
.extraDishcountelement related to the clicked ‘Add’ button, don’t select all of them and change their values. - Use unobtrusive event handlers, as you do for the inc/dec buttons, not inline ones as you are for the ‘Add’ button. You can use
dataattributes to store required metadata in the HTML which you can read when the event fires. - Use
Math.max()to set a minimum value for the decrement operation. - Use the function callback of
val()to set the value, instead of separate getter/setter calls.
Here’s an updated example with the changes made:
$('.dec').on('click', e => {
$(e.currentTarget).next().val((el, i) => Math.max(30, --i));
});
$('.inc').on('click', e => {
$(e.currentTarget).prev().val((el, i) => Math.max(30, ++i));
});
$('.buttonAdd').on('click', e => {
const $btn = $(e.currentTarget);
const price = $btn.data('price');
const id = $btn.data('id');
const name = $btn.data('name');
const extraDishcount = $btn.closest('.row').find('.extraDishcount').val();
console.log(extraDishcount, price, id, name);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="col-md-6 col-sm-6 pb-6">
<div class="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm">
<div class="p-3 position-relative">
<div class="list-card-body">
<h5 class="mb-1 text-center fw-bold"><a href="#" class="text-black extraTishTitle">Raja</a></h5>
</div>
</div>
<div class="row">
<div class="col-md-12 float-end">
<div class="d-flex p-3">
<span class="count-number">
<button type="button" class="btn-sm left dec btn btn-outline-secondary">
<i class="feather-minus">-</i>
</button>
<input class="count-number-input extraDishcount" name="extraDishcount" type="text" value="30" readonly="">
<button type="button" class="btn-sm right inc btn btn-outline-secondary">
<i class="feather-plus">+</i>
</button>
</span>
<span class="ms-auto">
<button type="button" data-price="1.00" data-id="27" data-name="Tofu Sambal" class="btn btn-outline-secondary btn-sm buttonAdd">ADD</button>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-sm-6 pb-6">
<div class="list-card bg-white h-100 rounded overflow-hidden position-relative shadow-sm">
<div class="p-3 position-relative">
<div class="list-card-body">
<h5 class="mb-1 text-center fw-bold"><a href="#" class="text-black extraTishTitle">Malar</a></h5>
</div>
</div>
<div class="row">
<div class="col-md-12 float-end">
<div class="d-flex p-3">
<span class="count-number">
<button type="button" class="btn-sm left dec btn btn-outline-secondary">
<i class="feather-minus">-</i>
</button>
<input class="count-number-input extraDishcount" name="extraDishcount" type="text" value="30" readonly="">
<button type="button" class="btn-sm right inc btn btn-outline-secondary">
<i class="feather-plus">+</i>
</button>
</span>
<span class="ms-auto">
<button type="button" data-price="0.8" data-id="30" data-name="Sambal Goreng" class="btn btn-outline-secondary btn-sm buttonAdd">ADD</button>
</span>
</div>
</div>
</div>
</div>
</div>