Serializing a subset of form

Question

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.

Answer 1

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:

Answer 2

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

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