jquery how to select form elements in sub-form div

Question

say I have the following form:

​

​<form id="f">
    <input name="a"/>
    <input name="b"/>
    <div id="sub_part">
        <input name="c"/>
        <input name="d"/>
    </div>
</form>
<form id="e">
    <input name="a"/>
    <input name="b"/>
    <div id="sub_part2">
        <input name="c"/>
        <input name="d"/>
    </div>
</form>

I usually can get all the name->value pairs using .serialize(). For example. I know i can get the information from form f by using:

$('form#f').serialize();

What if just want the name->value pairs from the sub_part div in form f? What would the jquery selector be in this case? For this exercise I do not want to change the structure of the html.

Please check out this fiddle where I have the problem outlined: http://jsfiddle.net/gu9XB/4/

Notice way I am trying to select the sub form is not working.

Answer 1

Just serialize the inputs inside the div. You were also using .sub_part so it was not selecting the div. If there's already an ID you can just select by id to make it faster

('#sub_part input').serialize();

Here's a working fiddle http://jsfiddle.net/gu9XB/21/