I have been posting this same issue for last 2-3 days , nobody gave a proper solution.
Problem:
I have set of increment and decrement button in my shopping cart page to manage products quantity before checkout. I want all my decrease button to be disabled if the quantity is equals to 1. I have used set of IF statements to do that. But, those IF conditions are only working when my cart page contains one item at a time. I have founded the issue but getting no solution for that. The problem is that, the button id is same on each cases so it override one another. So, I want to give different different id's when each cart item is displayed on the page with - and + buttons. How to make my code like that ?
Here's my code for both buttons and IF statements.
{{#each products}}
<tr>
<td><img src="/product-images/{{this.product._id}}.jpg"
style="width:70px;height:70px" alt=""></td>
<td>{{this.product.Name}}</td>
<td>Rs.{{this.product.Price}}</td>
<td>
<button class="btn btn-info mr-3 cart-item-count " id="button(-)"
onclick="changeQuantity('{{this._id}}','{{this.product._id}}','{{../user._id}}',-1)">-</button>
<span id="{{this.product._id}}">{{this.quantity}}</span>
<button class="btn btn-info ml-3 cart-item-count" id="button(+)"
onclick="changeQuantity('{{this._id}}','{{this.product._id}}','{{../user._id}}',1)">+</button>
</td>
<td>
<button type="button" class="btn btn-danger">Remove</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
<hr>
<div class="float-right pr-5 pt-5">
<h3 style="text-align:center">Total Rs. <span id="total">{{total}}</span></h3>
<a href="/place-order" class="btn btn-primary mt-3" style="width:100%">Place Order</a>
</div>
</div>
</section>
{{#each products}}
<h1 id="Quantity">{{this.quantity}}</h1>
{{/each}}
<script>
let Quantity = parseInt(document.getElementById('Quantity').innerHTML);
//console.log(Quantity)
if (Quantity == 1) {
document.getElementById("button(-)").disabled = true
} else {
document.getElementById("button(-)").disabled = false
}
if (Quantity == 10) {
document.getElementById("button(+)").disabled = true
} else {
document.getElementById("button(+)").disabled = false
}
function changeQuantity(cartId, proId, userId, count) {
count = parseInt(count)
let quantity = parseInt(document.getElementById(proId).innerHTML)
let qty = quantity + count
//console.log(qty)
if (qty > 1) {
document.getElementById('button(-)').disabled = false
} else if (qty == 1 || qty == 10) {
document.getElementById('button(-)').disabled = true
}
if (qty == 10) {
document.getElementById('button(+)').disabled = true
} else {
document.getElementById('button(+)').disabled = false
}
$.ajax({
url: '/change-product-quantity',
data: {
cart: cartId,
product: proId,
user: userId,
count: count,
quantity: qty
},
method: 'post',
success: (response) => {
document.getElementById(proId).innerHTML = quantity + count
document.getElementById('total').innerHTML = response.total
location.reload()
}
})
}
Note: value of quantity in the above code is taken from Mongodb using Handlebars.
As you can see this image that, the disabling effect only applied to first row of button not the rest. This has to be solved .
Expected output:
All the - button must be disabled while page loads.
Thank You:
