Styjun

I am creating a simple add to cart function where when the user has successfully added their product to cart they can view their cart and update the quantity using the select option in the cart page, but it seems that i can only update the first product that has been added to cart,if i add a second product i cant update that second product

cart.php

 <?php
 if(isset($_COOKIE["shopping_cart"]))
 
 $total = 0;
 $cookie_data = stripslashes($_COOKIE['shopping_cart']);
 $cart_data = json_decode($cookie_data, true);
 ?> 
 <?php
 foreach($cart_data as $keys => $values)
 
 ?> 
 <form id="myForm">
 <input type="hidden" name="hidden_id" value="<?php echo $values["item_id"];?>">

 <select name="qty" id="qty" class="form-control">

 <option style="display:none;" selected><?php echo $values["item_quantity"];?></option>

 <?php
 for($i=1; $i<=$values["item_qty"]; $i++)
 
 ?>

 <option value="<?php echo $i;?>"><?php echo $i;?></option>
 <?php
 
 ?> 
 </select>

 </form>
 

 



 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() 
 $("#qty").change(function() 
 var url = "<?php echo URLROOT; ?>"
 var form = $( '#myForm' ).serialize();
 $.ajax( 
 type: "POST", 
 url: url + '/shops/cookiesave', 
 data: form, 
 beforeSend: function() 
 //do something here like load a loading spinner etc.
 ,
 )
 .done(function() 
 window.location.reload(true);
 )
 );
 );
 </script>

I have define the URLROOT as define('URLROOT', 'http://localhost/vlake');

cookiesave function

 public function cookiesave()

$cookie_data = stripslashes($_COOKIE['shopping_cart']);
$cart_data = json_decode($cookie_data, true);
foreach($cart_data as $keys => $values)


 if($cart_data[$keys]["item_id"] == $_POST["hidden_id"])
 
 $cart_data[$keys]["item_quantity"] = $_POST["qty"];
 
 

$item_data = json_encode($cart_data);
setcookie('shopping_cart', $item_data, time() + (86400 * 30) ,'/');

$("#qty") will only ever identify the first element with that ID. So it just doesn't handle events on any of the others. Having multiple elements with the same ID is invalid in HTML - after all, if an ID does not uniquely identify something, then by definition it's not an ID! So JavaScript / jQuery will simply ignore any duplicates after the first one. You'll have the same problem with $( '#myForm' ) as well.

You need to use a class to identify the <select>, and then traverse the DOM to find the parent form:

 <form>
 <input type="hidden" name="hidden_id" value="<?php echo $values["item_id"];?>">

 <select name="qty" class="qty" class="form-control">

 <option style="display:none;" selected><?php echo $values["item_quantity"];?></option>

 <?php
 for($i=1; $i<=$values["item_qty"]; $i++)
 
 ?>

 <option value="<?php echo $i;?>"><?php echo $i;?></option>
 <?php
 
 ?> 
 </select>
 </form>

... and ...

$(".qty").change(function() 
 var url = "<?php echo URLROOT; ?>"
 var form = $(this).closest("form").serialize();
 $.ajax( 
 type: "POST", 
 url: url + '/shops/cookiesave', 
 data: form, 
 beforeSend: function() 
 //do something here like load a loading spinner etc.
 ,
 )
 .done(function() 
 window.location.reload(true);
 )
);

N.B. Just as a design point...I note that you reload the page as soon as AJAX has completed. The whole point of AJAX is to allow you to stay on the same page without re-loading. To avoid this unnecessary duplication of HTTP requests, you could either

a) forget about using AJAX for this, and just do a normal postback to update the quantity, or

b) when the AJAX completes, use a little bit of JavaScript just to update the cookie client-side instead.