user137348 user137348 - 7 months ago 23
HTML Question

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.

Answer

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.