html - jQuery form serialize - empty string

Question

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.

Answer 1

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.