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

Question

我正在网上商店制作购物篮/购物车。

我想要完成的是更新客户在购物车概述页面上所做的数量或变体选择的更改。

现在，为了使用 jQuery 执行此操作，我尝试在选择器上使用 Change() 事件: .cartItem输入，.cartItem选择

购物篮概述当前在表中的每行/行中列出一项。 然后我在想，为了使 serialize() 成为可能，我需要有一个 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();

<小时/>

Another fiddle