Question

i have a main form that contains an inner form (that inner form appears in edit case only)
and i want both forms to be separated from each other, than when submitting the main form the inner is not submitted, how to do so ?

here’s a snippet:

<h:form id="mainForm">

  <!-- some inputs here -->

  <h:commandButton value="submit main" action="#{myBean.mainSubmit()}" />

 <h:panelGroup rendered="#{myBean.editMode}"> 
    <h:form id="innerForm"> 
      <!-- some inputs here -->

      <h:commandButton value="submit inner" action="#{myBean.innerSubmit()}" />
    </h:form>
 </h:panelGroup>

 </h:form>

Current Behavior: when submitting mainForm the inner form is submitted too, but when submitting the inner form the main is not submitted.

Desired Behavior: when submitting the mainForm the inner is not submitted, and when submitting the inner, the main doesn’t get submitted too.

Answer 1

Nested Forms are not something that you really want to have in your pages…

How about this approach? wrap in two panels and use ajax to execute/render them

<h:form id="mainForm">
 <h:panelGroup id="FirstPanel" rendered="#{myBean.editMode}"> 
  <!-- some inputs here -->
  <h:commandButton value="submit main" action="#{myBean.mainSubmit()}" >
      <f:ajax execute="FirstPanel" render="FirstPanel"></f:ajax>
  </h:commandButton>
 </h:panelGroup>

 <h:panelGroup id="SecondPanel" rendered="#{myBean.editMode}"> 
   <!-- some inputs here -->
   <h:commandButton value="submit inner" action="#{myBean.innerSubmit()}" >
       <f:ajax execute="SecondPanel" render="SecondPanel"></f:ajax>
   </h:commandButton>
 </h:panelGroup>
</h:form>

You can place as many <h:panelGroup that you want and add their id’s in the render execute of your f:ajax for example f:ajax execute="FirstPanel ThirdOne AnotherOne"…