jQuery form serialize - empty string
JqueryHtmlJquery Problem Overview
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.
Jquery Solutions
Solution 1 - Jquery
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.
Solution 2 - Jquery
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.
Solution 3 - Jquery
There is no name
attribute in the input... that may be a problem for serialize.
<input id="input1" type="text" value="2" name="input1" />
Solution 4 - Jquery
Also make sure there are no 2 elements with the same id on the page.