Question

I have a nested form which looks something like:

    <FORM METHOD="GET" NAME="mainForm"  ACTION=<%=response.encodeURL("updateForm.jsp")%>>

    </FORM>

<t:panel script="showSelect(3)">
      <t:panelTab left="362" width="200px">Tab3</t:panelTab>
    <t:panelBody src="childForm.jsp">
    </t:panelBody>
</t:panel>

CHILD FORM CODE:

<FORM METHOD="GET" NAME="childForm"  id = "childForm" ACTION=<%=response.encodeURL("processChildForm.jsp")%>>
<span style="padding:0 10px;">
<button class="submitChildFormClass"
        style="width:auto;"
        id="submitChildForm"
        >Process Child Form
</button>
    </span>
</FORM>

I wanted to submit the child form when i click on submitChildForm button so I wrote the below jquery handler to do that:

$('.submitChildFormClass').live('click',function() {
    document.getElementById("previewOnlyVal").value = "previewOnly";
    $('#childForm').submit();
});

The problem is that when I click on the button, the MAIN FORM gets submitted instead of the child form. I know it isn’t a good programming practice to use nested forms but this is an old code and we do not have much time yet to revise these codes.
Can anyone tell me what I might be missing in the codes which causes the main form to be submitted by the jquery? Thanks in advance for your help.

Answer 1

Nesting of forms is not allowed! you could have several forms but nesting is just not allowed.