Блог

 {% for product in products %}
...
         <form class="form-inline">
              <div class="input-group">
                 <input type="hidden" name="productId" id="productId" value="{{product.id}}">
                 <input type="text" class="form-control" name="productQuantity" id="productQuantity" style="width: 40px; height: 40px;" placeholder="1">
                 <div class="input-group-append">
                     <button type='button' name="addToCart" id="addToCart" value=" " class="btn btnother"><i class="fas fa-plus fa-sm" style="color: white;"></i></button>
                 </div>
             </div>
        </form>   
...
{% endfor %}
  

Это упрощенный код!

Итак, у меня есть веб-сайт Django для электронной коммерции. На главной странице я представляю карточки разных товаров с возможностью добавления их в корзину.

Каждый раз, когда кто-то добавляет товар в корзину, я хочу обновлять только изображение корзины в заголовке. Итак, я хочу использовать AJAX для передачи productId и productQuantity моему views.py .

Вот мой JS:

 $(document).ready(function(){
  $('form').click(function() {

    var productId = $('#productId').val();
    var productQuantity = $('#productQuantity').val();

    if (Number.isInteger(Number(productQuantity))){
      productQuantity = productQuantity;
    } else {
      productQuantity = 1;
    }
  
    $.ajax({
      url: 'update',
      type: 'post',
      cache: false,
      data: { 'productId' : productId,
              'productQuantity' : productQuantity }
    });

  });
});
  

Однако, когда я добавляю в корзину, productId печатаемая информация одинакова для всех продуктов. Я думаю, это потому, что после for loop того, как он хранит только последний productId

Каков был бы способ получить идентификатор каждого отдельного элемента?

Поскольку у каждого form есть a productId , вы можете указать диапазон при получении значения productId , вы можете использовать приведенный ниже код для поиска productId только в пределах текущего form :

 var productId = $(this).find('#productId').val();