jQuery form.serialize() returns an empty string

Question

I've got a problem with the form.serialize() function in jQuery. When I try to submit my serialized form via AJAX, serialize() only returns me an empty string.

Perhaps there's a problem with my HTML outline:

<form id="category-dynamic" class="dynamic"> <fieldset id="inner-fieldset"> <legend id="new-category"> <label for="category-name">Category Name: </label> <input type="text" name="category-name" value="" /> </legend> <ul id="category-fields"> <li> <label>Field #1:</label><br /> <input type="text" name="fields[]" value="" /> </li> <li> <label>Field #2:</label><br /> <input type="text" name="fields[]" value="" /> </li> </ul> </fieldset> </form>

In my jQuery function I simply call:

$.post("processor.php", $('#category-dynamic').serialize(), function(data){ // data handling here... });

Where do you get the empty string ?can you show your php code? — Jayantha Lal Sirisena
– Jayantha Lal Sirisena, Commented May 28, 2011 at 15:35
As a test, your code appears to be working fine: jfcoder.com/test/serialize.php All that I do is <?php print_r($_POST); ?> on processor.php. Make sure and have console open. — Jared Farrish
– Jared Farrish, Commented May 28, 2011 at 15:39
serialize() most certainly does not return an empty string: jsfiddle.net/fallen888/HFTV6 — Kon
– Kon, Commented May 28, 2011 at 15:42
Before your $.post() .. add alert($('#category-dynamic').serialize()) to prove to yourself serialize() is returning data — jglouie
– jglouie, Commented May 28, 2011 at 15:44
of course serialize(9 does not return an empty string, but it does, the problem is on the client side ( $('#category-dynamic').serialize() in the java console also returns "" ) so the PHP script is not necessary here — n0pt3x
– n0pt3x, Commented May 28, 2011 at 15:45

RijulB · Accepted Answer · 2015-01-23 10:37:41Z

44

A heads up for others who might encounter this problem. Apart from not being disabled, the <input> fields must also have name attribute for serialize() to work.

answered Jan 23, 2015 at 10:37

RijulB

6151 gold badge7 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

KWallace Over a year ago

In the code provided, the inputs DO have a "name".

Daniel Rodriguez Over a year ago

Finally someone put me in the right direction! I wish seen this post an hour ago.

robmzd · Accepted Answer · 2011-06-23 15:16:38Z

I had a similar problem to this. When debugging the JavaScript I could see the input values within the form but when calling serialize() the resulting string was empty.

It turned out I was disabling my input elements on the form before calling serialize(). To fix it I changed the code to retrieve the form values before disabling, then use the form values string in the post method.

// Disabling the input fields breaks serialize, so get the values string first var formValues = form.serialize(); form.find('input').attr('disabled', 'disabled'); // Now post the form to the server $.post(this.action, formValues, function (data) { //...

KWallace · Accepted Answer · 2017-11-07 15:38:52Z

Late answer, but relevant.

In addition to input fields requiring names, the FORM itself must also have a name, not just an ID.

Josh · Accepted Answer · 2018-03-21 05:46:51Z

In case this helps someone in the future, it will also return an empty string if its a <form> within a <form> (which is already a no-no obviously but something to check).

Marc Roussel · Accepted Answer · 2021-06-08 16:30:28Z

I got an ASP.NET MVC app Using @Html.TextBoxFor which set a name attribute automatically.

In my case I had 2 forms with the same name for which one of them had no inputs at all. I renamed the one with inputs that was resulting in an empty string and everything was fine when serializing it.

The JQuery was picking the empty form of the same name.

Nasib · Accepted Answer · 2023-05-07 07:57:45Z

I had a similar problem. I know it happens to all of us.

i was doing $('primary_form').serialize() (missing the selector symbol.)

fixed it with $('#primary_form').serialize()

Collectives™ on Stack Overflow

jQuery form.serialize() returns an empty string

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Related