CODEWITHSUNDEEP
jqueryhtmlserialization
n0pt3x
n0pt3x

Reputation: 137

jQuery form.serialize() returns an empty string

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

Upvotes: 7

Views: 21146

Answers (6)

Nasib
Nasib

Reputation: 1549

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

Upvotes: 0

Marc Roussel
Marc Roussel

Reputation: 499

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.

Upvotes: 0

Josh
Josh

Reputation: 949

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

Upvotes: 4

KWallace
KWallace

Reputation: 632

Late answer, but relevant.

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

Upvotes: 5

RijulB
RijulB

Reputation: 605

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.

Upvotes: 43

robmzd
robmzd

Reputation: 1823

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

Upvotes: 13

Related Questions