Question

我想在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>

Jquery我正试图用来提交

        $(".submit-btn").click(function (event) {
            event.preventDefault();
            var formData = $(".add-form").serialize();
            console.log(formData);

        })

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

输出：qty = 1＆amp; item = 2＆amp; qty = 1＆amp; item = 12＆amp; qty = 1＆amp; item = 3＆amp; qty = 1＆amp; item = 9

Answer 1

ID在文档中必须是唯一的，但您的代码看起来会为每个产品添加重复的ID。正如@TonyM在评论中指出的那样，您应该将其更改为类而不是ID。

但是如果你这样做，你的提交处理程序将序列化文档中的每个.add-form - 可能不是你想要的。相反，请使用最近的form元素祖先：

$(".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);
});

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

1 个答案: