Question

我正在网上商店购买篮子/购物车。

我想要完成的是更新数量或变体选择的变化，客户正在购物车概述页面上进行更新。

现在用jQuery做这个，我在选择器上尝试使用change（）事件： .cartItem input，.cartItem select

购物篮概述目前在表格中列出每个tr /行一个项目。我当时正在考虑为了使序列化（）成为可能，我需要为每个项目form

我在每个<form class="cartItem">之前应用了一个表单<tr>，并在</form>之后关闭</tr>。以下是我完全理解的代码：http://jsfiddle.net/g2Pmu/1/

但它不起作用。我错了吗？

目前我的代码有两个错误：

1. jQuery doesnt set change event on .cartItem input?
2. jQuery cannot serialize the .cartItem form?

我正在寻找的关于变革的成功序列化是：

co_product=78&co_variant=M&co_qty=3

为什么jQuery不认为我的表单是一个有效的序列化表单，我怎么能以正确的方式解决这个问题呢？

如有任何问题，请发表评论。

Answer 1

在我看来，问题是你的标记结构，因为这是一个无效的标记：

 <tbody>
    <form class="cartItem">
    <input type="hidden" name="co_product" value="78" />
    <tr>

您在<tbody>和<tr>之间无法填写表单。

您可以遵循有效的标记结构，例如：

<form class="cartItem">
   <input type="hidden" name="co_product" value="78" />
   <table>
       // all the form elems
   </table>
</form>

Demo updated fiddle

或者您可以使用单个表单并将所有隐藏的输入放在trs可用的任何tds中，如下所示：

<form class="cartItem">
<table class="table table-bordered tbl-cart">
    <thead>
        <tr>
            <td>Product Name</td>
            <td>Variant</td>
            <td class="td-qty">Quantity</td>
            <td>Unit Price</td>
            <td>Sub Total</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><!--put the hidden input here-->
                <input type="hidden" name="co_product" value="78" /> <a href="/p/nike-airmax-10">Nike AirMax 1.0</a>

            </td>
            <td>
                <select name="co_variant" class="item-variant">
                    <option value="S" selected="selected">S</option>
                    <option value="M">M</option>
                </select>
            </td>
            <td>
                <input type="number" name="co_qty" value="2" class="item-qty form-control text-center" />
            </td>
            <td class="price_unit">249,00 SEK</td>
            <td class="price_display">498,00 SEK</td>
        </tr>
        <tr>
            <td><!--and here-->
                <input type="hidden" name="co_product" value="77" /><a href="/p/46-jedi-morgonrock">Nike Pinky</a>

            </td>
            <td>
                <select name="co_variant" class="item-variant">
                    <option value="S" selected="selected">S</option>
                    <option value="M">M</option>
                </select>
            </td>
            <td>
                <input type="number" name="co_qty" value="1" class="item-qty form-control text-center" />
            </td>
            <td class="price_unit">499,00 SEK</td>
            <td class="price_display">499,00 SEK</td>
        </tr>
        <tr>
            <td colspan="4" align="right">Total</td>
            <td class="total" colspan="2"><b>997,00 SEK</b>

            </td>
        </tr>
    </tbody>
</table>
</form>

你可以尝试像这样改变你的jQuery：

$(document).ready(function () {
    $('.cartItem input, select').change(function () {
       var me = $(this);
       var form = $(me).closest('tr').find(':input').serialize();
       alert(form);
       return false;
    });
});

更新到此行：

$(me).closest('tr').find(':input').serialize();

jQuery更改事件，jQuery中表单序列化的问题

1 个答案:

Demo updated fiddle

Another fiddle