i am trying to make an add to cart button and i am not having any errors but the button is not showing anything when i press it as i was testing it with the alert function and the increment and decrement buttons for the quantity are not working either so i think there is a problem with the whole jquery code but i can’t know what is it
<div class="row mt-2">
<div class="col-md-3">
<input type="hidden" value="{{$products->id}}" class="prod_id">
<label for="Quantity"> Quantity</label>
<div class="input-group text-center mb-3 " style="width: 110px">
<button class="input-group-text decrement-btn">-</button>
<input type="text" name="quantity " class="form-control qty-input text-center" value="1"/>
<button class="input-group-text increment-btn">+</button>
</div>
</div>
<div class="col-md-9">
<br>
<button type="button" class="btn btn-success me-3 float start"> Add to wishlist</button>
<button type="button" class="btn btn-success me-3 addtoCartbtn float-start"> Add to cart</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<hr>
<h3>Description</h3>
<p class="mt-3">
{!! $products->desc!!}
</p>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
<script>
$(document).ready(function {
$('.addtoCartbtn').click(function (e) {
e.preventDefault();
var product_id= $(this).closest('.product_data').find('.prod_id').val();
var product_qty= $(this).closest('.product_data').find('.qty-input').val();
alert(product_id);
alert(product_qty);
});
$(".increment-btn").click(function (e) {
e.preventDefault();
var inc_value=$(".qty-input").val();
var value= parsint(inc_value,10);
value= isNaN(value) ? '0': value;
if(value < 10){
value++;
$(".qty-input").val(value);
}
});
$('.decrement-btn').click(function (e) {
e.preventDefault();
var dec_value= $('.qty-input').val();
var value= parsint(dec_value,10);
value= isNaN(value) ? '0': value;
if(value > 1){
value--;
$('.qty-input').val(value);
}
});
});
</script>
@endsection
>Solution :
You should probably look at the console.
@section('scripts')
<script>
$(document).ready(function() { // changes
$('.addtoCartbtn').click(function (e) {
e.preventDefault();
var product_id= $(this).closest('.product_data').find('.prod_id').val();
var product_qty= $(this).closest('.product_data').find('.qty-input').val();
alert(product_id);
alert(product_qty);
});
$(".increment-btn").click(function (e) {
e.preventDefault();
var inc_value=$(".qty-input").val();
var value= parseInt(inc_value,10);
value= isNaN(value) ? '0': value;
if(value < 10){
value++;
$(".qty-input").val(value);
}
});
$('.decrement-btn').click(function (e) {
e.preventDefault();
var dec_value= $('.qty-input').val();
var value= parseInt(dec_value,10);
value= isNaN(value) ? '0': value;
if(value > 1){
value--;
$('.qty-input').val(value);
}
});
});
</script>
@endsection
you are assigning value to jquery array
$('.qty-input').val();
This should be changed to
$('.qty-input')[0].val()
Fixed Typos 🙂