I have a form that embeds another form:

<form>
  <input type="text" name="main[name]">
  <textarea name="main[body]"></textarea>
  <div id="embedded">
    <input type="text" name="main[embedded][name]">
    <textarea name="main[embedded][body]"></textarea>
  </div>
</form>

I need to serialize the embedded form only.

$('#embedded').serialize() results in empty string.

I have a form that embeds another form:

<form>
  <input type="text" name="main[name]">
  <textarea name="main[body]"></textarea>
  <div id="embedded">
    <input type="text" name="main[embedded][name]">
    <textarea name="main[embedded][body]"></textarea>
  </div>
</form>

I need to serialize the embedded form only.

$('#embedded').serialize() results in empty string.

• javascript
• jquery

Share Improve this question Follow asked Dec 13, 2011 at 10:45 DziamidDziamid 11.6k1212 gold badges7272 silver badges107107 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

You are not embedding another form, you are embedding a div.

The serialize() method can only be called on a form elements, or the form element itself.

var serialized = $('#embedded').find(':input').serialize();

The .serialize() method can act on a jQuery object that has selected individual form elements, such as <input>, <textarea>, and <select>. However, it is typically easier to select the <form> tag itself for serialization:

I haven't tested this, but you could try:

$("<form/>").html($('#embedded').clone()).serialize()