Не могу обновить количество, используя опцию выбора с помощью ajax

Question

Я создаю простую функцию добавления в корзину, где, когда пользователь успешно добавил свой продукт в корзину, он может просматривать свою корзину и обновлять количество, используя опцию выбора на странице корзины, но кажется, что я могу только обновить первый продукт, который был добавлен в корзину, если я добавлю второй продукт, я не смогу обновить этот второй продукт

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>

Я определил URLROOT как define('URLROOT', 'http://localhost/vlake');

функция сохранения куки

  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) ,'/');
}

Answer 1

$("#qty") будет идентифицировать только первый элемент с этим идентификатором. Так что он просто не обрабатывает события ни на одном из других. Наличие нескольких элементов с одинаковым идентификатором недопустимо в HTML - в конце концов, если идентификатор не идентифицирует что-то однозначно, то по определению это не идентификатор! Так что JavaScript / jQuery будет просто игнорировать любые дубликаты после первого. У вас будет такая же проблема и с $( '#myForm' ).

Вам необходимо использовать класс для определения <select>, а затем пройти DOM, чтобы найти родительскую форму:

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

... и ...

$(".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. Точно так же, как точка дизайна ... Я отмечаю, что вы перезагрузите страницу, как только AJAX завершит работу. Смысл AJAX в том, чтобы позволить вам оставаться на одной странице без перезагрузки. Чтобы избежать этого ненужного дублирования HTTP-запросов, вы можете либо

a) забудьте об использовании AJAX для этого и просто выполните обычную обратную передачу для обновления количества, или

b) когда AJAX завершит работу, используйте немного JavaScript только для того, чтобы вместо этого обновить клиентскую часть cookie.