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.