Javascript 如何编写Jquery以在for循环中提交单击的表单

我想在Jquery中提交所选表单输出。相反，我也得到了所有其他表单数据

                <table class="table table-hover">
                    {% for obj in product %}
                        <form id="add-form" method="GET" action="{% url 'cart' %}">
                        <tr>
                            <td>{{ obj.seller }}</td>
                            <td><i class="fa fa-inr" aria-hidden="true"></i>&nbsp;{{ obj.price }}</td>
                             <td>

                                <label for="quantity">Qty: </label>

                                 <input min="1" class="input-sm" type="number"  name="qty" value="1" />

                            </td>
                            <td>
                                <input  class="inputid" name="item" type="hidden" value="{{ obj.id }}"/>
                                <!--<a class="btn btn-default btn-xs btn-primary" href="#">Add to Cart&nbsp;<i class="fa fa-shopping-cart" aria-hidden="true"></i></a> -->
                                <input class="submit-btn" type="submit" value="Add to cart" class="btn btn-default btn-xs btn-primary"/>
                            </td>
                        </tr>
                        </form>
                  {% endfor %}
                </table>

控制台日志中的输出（获取所有提交的表单数据（每个表单的输出数量和项目）

---

输出：qty=1&item=2&qty=1&item=12&qty=1&item=3&qty=1&item=9在文档中ID必须是唯一的，但您的代码似乎会为每个产品添加重复的ID。正如@TonyM在其注释中所述，您应该将其更改为类而不是ID

但是如果您这样做，您的提交处理程序将序列化文档中的每个

。添加表单

——可能不是您想要的。请使用最近的

表单

元素祖先：

$(".submit-btn").on("click", function(event) {
  var form, formData;
  event.preventDefault();
  form = $(this).closest("form");
  if (form) {
    formData = form.serialize();
    console.log(formData);
  }
});

还可以保留默认按钮行为，并使用表单本身上的提交处理程序抑制表单提交。这样，您就可以始终在正确的表单范围内操作，而不必在上级链上导航：

$("form").on("submit", function(event) {
  event.preventDefault();
  var formData = $(this).serialize();
  console.log(formData);
});

---

add form

在表单标签中是一个

id

而不是

类

。为什么

formData=$（“.add form”）.serialize（）；

？非常感谢帕尔帕蒂姆和托尼…add form实际上是一个类而不是id…帕尔帕蒂姆..我使用了默认按钮行为并给出了结果。非常感谢

$("form").on("submit", function(event) {
  event.preventDefault();
  var formData = $(this).serialize();
  console.log(formData);
});