jQuery serialize nested form

Question

I have a form inside another form element but when I try to serialize the nested form the function just returns an empty object. I ask this because I'm coding a Wordpress plugin and I need a form in the post editor page and everything I put in the page seems to be added inside a parent form, so here is an exmaple of what I want:

JS Fiddle

<form>
<div>Other content goes here...</div>
<form id="otroform"><input type="text" value="meine valor" name="variable"/></form>
</form>

This is the JS code

var formData = jQuery('#otroform').serializeArray();
console.log(formData);

Returns:

[]

If I remove the parent form then it will work normally.

Thanks in advance.

Answer 1

serializeArray() doesn't require a form. So, you can pull this off without the inside form by collecting the input(s) by a distinct class.

For example:

html:

<form>
<div>Other content goes here...</div>
<form id="otroform"><input type="text" class="otroform" value="meine valor" name="variable"/></form>
</form>

javascript:

var formData = jQuery('.otroform').serializeArray();
console.log(formData);

http://jsfiddle.net/bz5ddf1L/

see .serializeArray() documentation: http://api.jquery.com/serializearray/

Answer 2

Changing your code to have the outer form use the ID it works:

<form id="otroform">
    <div>Other content goes here...</div>
    <form id=""><input type="text" value="meine valor" name="variable"/></form>
</form>

This is because of the issue of nested forms which you cannot have.

JSFiddle: http://jsfiddle.net/xdydtset/1/

Answer 3

You can't have nested forms. You can have different forms, but not nested forms.

Look here for references: Can you nest html forms?