How to handle two form tags in visualforce page

Question

I have 2 <apex:form> tag on Visualforce page. like below -

<apex:form id="form1">
-
-
-  Some input fields are here
-

</apex:form>

<apex:form id="form2">
    <apex:commandButton title="Save & Continue" value="Save & Continue" action="      
    {!saveApplication}" />
</apex:form>

Now my requirement is when i click on this form2's "Save & Continue"button then form1 should be submitted and controller's saveApplication function should be called. I know in Java i can write a java script function and can call it on "Save & Continue" button's onClick event. like this -

function submitForms()
{
    document.form1.action = saveApplication.do;   
    document.form1.submit();
}

but how can i do it in salesforce?

Thanks in advance

Answer 1

Background: I am not sure if there is some other reason for wanting two form tags in your page your not describing in your question. However in Visualforce this is not required, in fact in the past it has caused performance issues with multiple viewstate being output to the page (though this has now been resolved). So I personally would avoid it unless you have good reason to use multiple form tags.

Answer: Basically you can have as many controller functions bound to as many commandButton's as you wish. Visualforce only requires that you have at least one apex:form around them all and it will handle invoking the correct controller function/action method for you. Also unless there is something in your requirements missing from your question, there is also no need for JavaScript to accomplish this.

A section of a Visualforce page that allows users to enter input and then submit it with an or . The body of the form determines the data that is displayed and the way it is processed. It's a best practice to verify that pages and custom components use at most one apex:form tag.

http://www.salesforce.com/us/developer/docs/pages/Content/pages_compref_form.htm

Hope this helps! :)

Answer 2

In Visualforce you can do it like in a normal html page, that is using javascript function. But the "problem" in visualforce is that element ids are generated "on-the-fly" so you can not acces your form element just like this document.form1.submit. I would do it with jQuery because it has very powerfull selectors:

<apex:form id="form1">
    ...
</apex:form>

<apex:form id="form2">
    <apex:commandButton value="Save & Continue" action="{!saveApplication}" id="saveButton" />
</apex:form>

<script>
jQuery('[id$=saveButton]').click(function(){
    jQuery('[id$=form1]').submit();
});
</script>

Answer 3

Add a unique styleClass to the form then use jquery to to select the form based on the class name. Finally, get the id.