Question

I’m trying to serialize a form into a div but it doesn’t work and I don’t know why.

I have this:

<div id="dialog-form">
   <form>

<LABEL for="firstname">First name: </LABEL>
          <INPUT type="text" id="firstname"><BR>
<LABEL for="lastname">Last name: </LABEL>
          <INPUT type="text" id="lastname"><BR>
<LABEL for="email">email: </LABEL>
          <INPUT type="text" id="email"><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR>
<INPUT type="submit" value="Send"> <INPUT type="reset">

    </form>
</div>

I try this :

jQuery("#dialog-form").find("form").serialize()

but it returns an empty string, even if the text fields contain data. Can anybody tell me why?

Answer 1

You have no name attributes on your <input> elements. Serialize (and indeed, regular HTTP form submissions) require that your input elements be named, as the entire purpose of serialize is to turn your elements into name=value pairs.

Add name="..." attributes to your <input> tags:

<input type="text" name="firstname" id="firstname"><br>

Your radio buttons will also be omitted form the serialize string if they’re not checked.