Missing data on form submit: several forms in one table

I have a complex screen, which uses a listed of nested tables and several forms respective ajaxSubmit.

Although I believed that the issues was initial caused by jQuery, I had to find out that my HTML structure was causing issues. My initial structure was:

<table>
    <tr>
        <form id="foo1" ..>
开发者_如何转开发            <td><input ..></td>
            <td><input ..></td>
        </form>
    </tr>
    <tr>
        <form id="foo2" ..>
            <td><input ..></td>
            <td><input..></td>
        </form>
    </tr>
</table>

This works in IE8 and Chrome 11, but doesn't in FF3.6 and 4 respective Safari 5.0.4.

Thanks everyone for you help and sorry for pointing in the wrong direction!

I believe this is a scoping issue. Try:

data: $(this).serialize(),

Try this:

function updateCategory(id) {
    var form = $('#sc' + id);

    form.ajaxSubmit({
        data: form.serialize(),
        type: 'post',
        url: '?action=modCat',
        success: function(response) {
            $('#allCategories').html(content);
        }
    });
}

This behavior was supported in the old HTML specifications or at least tolerated. This changed in the later implementations. Hence one should either:

a) use several tables (one per form)

<form id="foo1">
    <table ..>
    </table>
</form>
<form id="foo2">
    <table ..>
    </table>
</form>

b) use DIVs instead of tables