JSF Updating forms - forms

Question

I am trying to submit some data in JSF. The problem is that I have two forms and the button which I want to trigger the update is outside of the forms, here I place my code so that you can understand better what I mean. Because of that I cannot submit any data to the server.
<ui:define name="mainArea">
<h:form id="form">
<div class="row">
<div class="col-md-5">
<p:outputLabel for="rfqName" value="Name" />
<br></br>
<p:inputText id="rfqName" required="true" style="width:100%;"
value="#{data.data.rfqName}" maxlength="100">
<p:ajax event="change" update="#form"/>
</p:inputText>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p:outputLabel for="rfqVersion" value="Version" />
<br></br>
<p:inputText id="rfqVersion" required="true" style="width:60%;"
value="#{data.data.rfqVersion}" maxlength="20"></p:inputText>
</div>
</div>
</h:form>
</ui:define>
<ui:define name="actionSection">
<p:commandButton actionListener="#{logic.close}" value="Proceed" update=":form"
styleClass="pull-right">
</p:commandButton>
<p:commandButton value="Save" styleClass="pull-right" />
</ui:define>

Answer 1

You can use the primefaces RemoteCommand. This allows you to click the button on the form from the outside.
<ui:define name="mainArea">
<h:form id="form">
<div class="row">
<div class="col-md-5">
<p:outputLabel for="rfqName" value="Name" />
<br></br>
<p:inputText id="rfqName" required="true" style="width:100%;"
value="#{data.data.rfqName}" maxlength="100">
<p:ajax event="change" update="#form" />
</p:inputText>
</div>
</div>
<div class="row">
<div class="col-md-3">
<p:outputLabel for="rfqVersion" value="Version" />
<br></br>
<p:inputText id="rfqVersion" required="true" style="width:60%;"
value="#{data.data.rfqVersion}" maxlength="20"></p:inputText>
</div>
</div>
<p:remoteCommand name="remoteClose" actionListener="#{logic.close}"
update=":form" styleClass="pull-right" />
<p:remoteCommand name="remoteSave" value="Save"
styleClass="pull-right" />
</h:form>
</ui:define>
<ui:define name="actionSection">
<p:commandButton type="button" onclick="remoteClose()" value="Proceed" />
<p:commandButton type="button" onclick="remoteSave()" value="Save"
styleClass="pull-right" />
</ui:define>