Take the 2-minute tour ×

Given the following form:

<form id="form" name="form">
<input name="name"/>
<input name="version"/>
<input name="template"/>
<textarea name="elements"></textarea>
<textarea name="features"></textarea>
<textarea name="layout"></textarea>

and javascript (using jQuery 1.3.2):

$(function() {
    $('#form').bind('submit',function() { alert($('#form').serialize()); return false; });

The output of submitting the above form from the above javascript alert is:


Where ... is whatever is contained in the elements field.

I would expect that $('#form').serialize() to return a string something like:


I do note that $('input,textarea').serialize() does perform the expected behaviour (i.e. return "name=&version=&template=&elements=asdafe&features=&layout="), however I'm curious as to why the $('#form') version only returns "elements=".

I've tried this on Safari 4 and Firefox 3.5, so I'm confident it's something I'm missing.

Thanks for reading.

share|improve this question
Try adding a name to your form. –  Zed Aug 17 '09 at 19:51
@Zed: Thanks; unfortunately, adding a name didn't fix it. –  Brian M. Hunt Aug 17 '09 at 19:54

3 Answers 3

up vote 16 down vote accepted

It's the name of your textarea that's throwing it off.

Here's how it breaks down. In the DOM, form nodes have several special properties, most notably these two (which are exposed in this order)

  1. The elements collections, which is an HTMLCollection of all the form controls (and a few other nodes like <fieldset> elements)
  2. A property of each named element in the form (i.e., form controls that have a name attribute)

Since you have a <textarea> with the name "elements", this effectively overwrites the built-in elements collection mentioned in #1 above, which is why when you serialize the form all you see is


Because that single form element has overwritten the entire collection.

Short solution? re-name your form elements to values that aren't existing DOM properties (your <input name="name"/> falls into this category as well)

share|improve this answer
+1 informative! –  Gavin Gilmour Aug 17 '09 at 20:03
Very helpful/informative answer. Thank you. –  Brian M. Hunt Aug 17 '09 at 20:09
I've opened the related question: stackoverflow.com/questions/1295851/… –  Brian M. Hunt Aug 18 '09 at 19:05

If anyone else stumbles on this problem, I had set the disabled property on all inputs before calling serialize(), so they weren't included in the set. Removing disabled before calling serialize() fixes this.

share|improve this answer

The .serializeArray() method creates a JavaScript array of objects, ready to be encoded as a JSON string. It operates on a jQuery object representing a set of form elements. The form elements can be of several types:

share|improve this answer

Your Answer


