jquery access динамически сгенерированная форма

Question

У меня есть форма, сгенерированная с использованием цикла for.

{% for id in data %} 
<form id="add_to_cart_{{id}}" method="POST" action="{% url 'add_to_cart' %}"> 
    {{id}} 
    <button type="submit" id="product_id_{{id}}" value="{{id}}">Add to cart</button> 
</form> 
{% endfor %} 

Это создает список кнопок на странице HTML, каждый из которых имеет различное значение в соответствии с {{id}}. Теперь я хочу опубликовать ajax-вызов для моего представления django и передать соответствующее значение в соответствии с кнопкой.

Проблема заключается в том, что мой вызов ajax принимает значение только для первого элемента. Итак, как динамически передать значение кнопки для вызова ajax?

Моя функция Аякса, когда есть статическая форма:

jQuery(document).ready(function($){ 
    $('#add_to_cart').on('submit', function(event){ 
     event.preventDefault(); 
     $.ajax({ 
      url : "/add_to_cart/", // the endpoint 
      type : "POST", 
      cache: false, 
      async: "true", 
      data : { product_id : $('#product_id').val()}, 

      success : function(json) { 
       console.log("success"); 
       alert("Product Added To Cart."); 
      }, 

      error : function(xhr,errmsg,err) { 
       console.log(err); 
       console.log(errmsg); 
      } 
     }); 
    }); 
}); 

Answer 1

Я выяснил, в конце концов.
Примечание: Пожалуйста, не голосуйте, поскольку я отвечаю на свой вопрос. Это может помочь кому-то.

Для динамически сгенерированной формы у вас должны быть разные идентификаторы для каждой формы, как в вопросе. id="form_id_{{id}}". Затем добавьте класс в форму, поскольку класс может быть одинаковым для нескольких элементов.

Как:

<form id="add_to_cart_{{id}}" class="AddToCartClass" action= ... 

Затем в JQuery доступа событие с именем класса. Например:

jQuery(document).ready(function($){ 
    $(document).on('submit', '.AddToCartClass', function(event){ 
     event.preventDefault(); 
     var prod_id = $(this).closest('form').find('#product_id').val(); 

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

Answer 2

$(this) должны иметь кнопку вы нажали. Возможно, $(this).val() вместо $('#product_id').val().