jQuery form serialize - empty string

My html:

 <script type="text/javascript">

    $(function() {

        $("#bt1").click(function() {

            var f = $("#form1");
            var formData = f.serialize();

            alert(formData);
        });

    }); 
</script> 

 <div id="div1">
      <form id="form1" action="/Home/Test1" method="post" name="down">
        <div id="div2">
            <input id="input1" type="text" value="2" />
        </div>    
      </form>
  </div>

 <input type="submit" id="bt1" />

When I fire up the click event, formData is empty. I'm using jQuery 1.4.2.

You have to give the input element a name. E.g.:

<form id="form1" action="/Home/Test1" method="post" name="down">
    <div id="div2">
        <input id="input1" type="text" value="2" name="foo"/>
    </div>    
</form>

will give you in the alert box foo=2.

.serialize() takes the name and the value of the form fields and creates a string like name1=value1&name2=value2. Without a name it cannot create such a string.

Note that name is something different than id. Your form also would have not worked if you used it in the "normal" way. Every form field needs a name.

Although it doesn't apply to this particular example, the same behavior occurs if one or more form inputs is disabled. Those inputs will not show up in the serialized string. In my case, all form inputs had values but were disabled, resulting in an empty string being returned.

There is no nameattribute in the input... that may be a problem for serialize.

<input id="input1" type="text" value="2" name="input1" />

jQuery form serialize - empty string

Related

Recent Posts