Question

I am using the serialize() function to grab all fields in a form. In rare cases, customers call saying that after they save the cart only one item is left. After investigating, it turns out that for some users the serialize() function is only submitting the last item array named items[ITEMNUM] = qty.

HTML :

<form id="cartitems" action="self">
    <table width="98%" border="0">
        <tr>
            <td style=" font-size:.9em;">title</td>
            <td width="30"> <input name="items[AH33.3600]" class="qty" value="1" /></td>
            <td width="30" nowrap="nowrap" style="padding-right:10px; border-bottom:1px solid #CCC;">Total</td>
        </tr>
        <tr>
            <td style=" font-size:.9em;">title</td>
            <td width="30"> <input name="items[PNP-A00SVR30]" class="qty" value="1" /></td>
            <td width="30" nowrap="nowrap" style="padding-right:10px; border-bottom:1px solid #CCC;">Total</td>
        </tr>
        <tr>
            <td style=" font-size:.9em;">title</td>
            <td width="30"> <input name="items[A4882+++++107+5X12]" class="qty" value="1" /></td>
            <td width="30" nowrap="nowrap" style="padding-right:10px; border-bottom:1px solid #CCC;">Total</td>
        </tr>
    </table>
</form>

JavaScript :

var subform = $("#cartitems").serialize();
$.ajax({
    beforeSend: function() {        
        $('#cartitems').slideUp().queue(function() {
            $(this).dequeue();
            $('#cartitems').html(' Please wait...  Cart Loading').show();
        });
    },
    url: "/order/ajax/cart",
    type: "POST",
    cache: false,
    data:  subform,
    dataType: "html",
    success: function(html){
        alert('info saved');
    }
});

The latest customer I spoke to was using Firefox 7.

Does anyone see a problem?

Answer 1

I tested this in several browsers and it seemed to work ok – http://jsfiddle.net/z6P4x/