JQuery serialize not working with inputs in Internet Explorer when the input is inside of a table

Question

Update: Ok, I need to be shot. I left out a little bit of form code to cut down on the length of the post. Here's the full code:

<form name="userupdate" id="userupdate" method="post">
<input type='hidden' name='username' id='username' value='andyd273' />
<input type='hidden' name='setusertype' id='setusertype' value='1' />
<table align="left" border="1" cellspacing="0" cellpadding="3" class="bodytext">
<tr><td>andyd273</td></tr>
<tr><td>
<input type='checkbox' name='DealerType[]' id='GM' value='1' /> GM<br>
<input type='checkbox' name='DealerType[]' id='Chrysler' value='2' /> Chrysler<br>
<input type='checkbox' name='DealerType[]' id='Ford' value='3' /> Ford<br>
</td></tr>
</table><br>
<input type='button' value='Save' onclick='javascript: formSubmit();' />
</form>

I figured I'd try something out, and removed the table stuff, just leaving the plain form inputs, and the checkboxes started working just like they do in Chrome.

So, new question: Why won't serialize work in IE when the inputs are inside of a table? Thanks to everyone that tried to help solve the first incomplete question!

Old question left for completeness:

I am trying to get a form to serialize. It works in Chrome and Firefox, but not in Internet explorer.
Example:

<input type='hidden' name='username' id='username' value='andyd273'>
<input type='hidden' name='setusertype' id='setusertype' value='1'>
<input type='checkbox' name='DealerType[]' id='GM' value='1' /> GM<br>
<input type='checkbox' name='DealerType[]' id='Chrysler' value='2' /> Chrysler<br>
<input type='checkbox' name='DealerType[]' id='Ford' value='3' /> Ford<br>

In Chrome I get:

Array
(
    [username] => andyd273
    [setusertype] => 1
    [DealerType] => Array
        (
            [0] => 1
            [1] => 3
        )

)

But in IE I only get:

Array
(
    [username] => andyd273
    [setusertype] => 1
)

So I'm not sure what needs to be done with it to make it work in IE.

/Old question

Answer 1

jQuery's serialize does not include unchecked checkboxes.

Check out this fiddle:

http://jsfiddle.net/UGaEp/3/

You can find more from the following question:

jQuery serialize does not register checkboxes

Ignore the code, wouldn't let me post an answer.

$('#test').on('click', '#submit', validate);

function validate() {
    var data = $('#test').serialize();
    console.log(data);
}​

Answer 2

Update:

Because nesting input elements in table elements is not legal HTML syntax. Chrome and Firefox smooth over this "problem", though, notably: Safari doesn't always.

To answer the comments - if the order is form > table > etc > input that's incorrect, table > table stuff > form > input is fine.

The "right" way to do formatting is basically divs or fieldsets and then style attributes. The various display options will probably be what you want (inline and inline-block probably being most useful, though table and assorted derivatives depending on which versions of IE you have to support) -- read here to figure out what's at your disposal, though possibly some chicanery with setting heights and widths.

Old:

Can you replace the checkbox interface with a multi-select interface? That may be one way to work around the...fussy...IE implementation. That is:

<select multiple name="DealerType">
<option value="1">GM</option>
//...etc
</select>

Also, from your sample, your hidden elements aren't closed (terminated with /> instead of >). Depending on which IE you're dealing with, that could be part of the problem.

Another clarifying comment: what version of jQ are you using?