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

13

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)
{
  //...

answered Jun 23, 2011 at 15:16

robmzd

1,8233 gold badges20 silver badges37 bronze badges

Comments

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

5

Late answer, but relevant.

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

answered Nov 7, 2017 at 15:38

KWallace

6327 silver badges17 bronze badges

Comments

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

4

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).

answered Mar 21, 2018 at 5:46

Josh

96910 silver badges19 bronze badges

Comments

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

0

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.

answered Jun 8, 2021 at 16:30

Marc Roussel

5099 silver badges22 bronze badges

Comments

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

0

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()

answered May 7, 2023 at 7:57

Nasib

1,6391 gold badge18 silver badges29 bronze badges

Collectives™ on Stack Overflow

jQuery form.serialize() returns an empty string

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related