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 >
                           <div >
                               <input type="hidden" value="{{$products->id}}" >
                               <label for="Quantity"> Quantity</label>
                               <div  style="width: 110px">
                                   <button >-</button>
                                   <input type="text" name="quantity "  value="1"/>
                                   <button > </button>
                               </div>
                           </div>
                           <div >
                           <br>
                           <button type="button" > Add to wishlist</button>
                           <button type="button" > Add to cart</button>
                           </div>
                       </div>
                    </div>
               </div>
           </div>
           <div >
               <hr>
               <h3>Description</h3>
               <p >
                   {!! $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

CodePudding user response：

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 :)