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

Have you tried it with a different name attribute for the checkboxes? Specifically, one without the braces? I'd poke at it myself, but I don't have my IE VM handy at the moment. — Carl, Dec 11 '12 at 15:30
I changed it, just for a test, to be DealerType1, DealerType2, DealerType3 instead of the braces, and it still is only sending the two hidden inputs. Very weird. — AndyD273, Dec 11 '12 at 15:50
ah, with the update, the answer is easy (if sad). Nesting input elements in table is not legal HTML. — Carl, Dec 11 '12 at 16:32

Carl · Answer 1 · 2012-12-11T16:45:56.887

1

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?

edited Dec 11 '12 at 16:45

answered Dec 11 '12 at 15:50

Carl

7,224
1
36
59

you were right about the non closed inputs, and the fact that the multi select helped me figure out that the problem is not with the form inputs. I updated the question to better reflect the problem. – AndyD273 Dec 11 '12 at 16:30
If you run inputs inside a table though the w3 html validation service it comes out valid. For granted that is assuming they are in the proper order table > tr > td > input. – Dennis Martinez Dec 11 '12 at 16:36
I've used tables for formatting forms forever. It's an easy way to make text boxes line up for instance, and at least for non jquery stuff (traditional form submit) it's always worked fine. If it's not legal HTML that's fine, I can learn new things, but what is the correct way to format a form and make things line up? – AndyD273 Dec 11 '12 at 16:36
A table is completely fine. – Dennis Martinez Dec 11 '12 at 16:40
@DennisMartinez I disagree, see for example: http://stackoverflow.com/questions/5967564/form-inside-a-table – Carl Dec 11 '12 at 17:00
@Carl I never said anything about sticking forms inside of a table wasn't bad and I also posted a strict syntax in a previous comment regarding inputs in a table. You stated that it was invalid to stick an input element inside of a table. Not trying to argue, just clearing things up. – Dennis Martinez Dec 11 '12 at 17:07
I'll have to look into fieldsets and the like. I'm always hoping to make the pages better. – AndyD273 Dec 11 '12 at 17:08

score 1 · Accepted Answer · edited May 23 '17 at 12:21

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);
}

edited May 23 '17 at 12:21

Community

1
1

answered Dec 11 '12 at 16:04

Dennis Martinez

5,406
9
43
59

I'm actually Ok with not including unchecked check boxes. I actually only care about the checked ones. And it's working in non IE as is. – AndyD273 Dec 11 '12 at 16:06
I'm not understanding what you mean by "working in non IE" the example above should work in ie. I've updated the fiddle to work with alerts rather than console.logs. – Dennis Martinez Dec 11 '12 at 16:09
You are correct, it should have worked as entered. Unfortunately I had left a little out. My apologies. See updated question for better explanation. – AndyD273 Dec 11 '12 at 16:26
I really think I'm missing something here lol. I checked the following fiddle in ie7-ie9 and it seems to be serializing. http://jsfiddle.net/UGaEp/3/ – Dennis Martinez Dec 11 '12 at 16:32
I'm seeing the following text when checkboxes are checked: username=andyd273&setusertype=1&DealerType%5B%5D=1&DealerType%5B%5D=2&DealerType%5B%5D=3 – Dennis Martinez Dec 11 '12 at 16:42
*sighs* I think my problem with using tables is a lot more complicated than even my question is leading to believe, due to some framework type stuff that I am using that I didn't really think of until just now. However, I now see where the problems may lie, and so I'm going to quietly go my way. Thanks for the fiddle! – AndyD273 Dec 11 '12 at 16:54
Yeah, so I tested it out on a barebones page without the frameworks I think may be interfering and it's working just fine. I like how frameworks help cut down on work, but I'm starting to wonder if they may cause more problems then they are worth. – AndyD273 Dec 11 '12 at 17:14
what framework? you could always try to use jquery's no conflict to avoid interference. http://api.jquery.com/jQuery.noConflict/ – Dennis Martinez Dec 11 '12 at 17:25
I'll probably do that when I have a little spare time. Thanks a lot! – AndyD273 Dec 11 '12 at 17:42

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

2 Answers2