Question

I am developing a web application. I have a page with a form, form1, and I am pushing another page which also has a form, form2, inside form1. Both the forms have some values. I want to serialize both the forms. When I specify the root form (form1) like $('#form1').serialize(); it serializes the root form (form1) only, not form2.

If specify like this $('#form1, #form2').serialize(); and $('form').serialize(); it sealizes all the forms.

What is wrong with this jQuery $('form1').serialize(); which serializes root form only, not form2?

I tried with a jsFiddle example, in which it works fine. What could be the issue in my web application form?

Answer 1

Even it is not supported for your purpose you can use :input selector.

$('#form1 :input').serialize();

for the performance using filter highly recomended.

$('#form1 > *').filter(':input').serialize();

If you can explain why you are using nested forms maybe we can suggest some workaround. for example if you only use the second form for AJAX request you can cover it by a div to easily select or give those form items an extra class and use the similar selector for them.