108

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.

Improve this question

4 Answers 4

Reset to default
228

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

are ids necessary for form serialize btw?
Let me suggest to include Madbreaks's answer here too.
I have a name but I still have the empty string when serializing my view is a collection so the names are for instance [0].Unit, [0].Currency
Answer below helped me... make sure your inputs are not DISABLED!
...and I had two form tags nested...was trying to serialize the inner form and got an empty string!. Never have nested HTML form tags.
86

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.

Improve this answer

6 Comments

That's a nasty one. Wanted to disable the fields while I'm sending the mail ajax-style and did it before serializing the form...
Oh my gosh this was an issue that was driving me crazy. +1 man, any way to make it work on disabled elements?
@Noitidart You could write your own serialize jQuery extension that iterates over the inputs and includes disabled ones. But there's no way to do it, as far as I know, using out-of-the-box jQuery.
It makes sense not to include disabled elements, since disabled elements should not contain user input.
@JennyO'Reilly Sure, but not containing user input does not mean "does not have a value".
|
11

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

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

Comments

7

Also make sure there are no 2 elements with the same id on the page.

Improve this answer

1 Comment

This is a comment, not an answer to the question. Please use comments in future. Thanks :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.