Visualforce Page and Custom Component same record field update

Question

I've created a visualforce page and custom component that is referencing the same record, in which I've passed the record from the standardController to the custom component via apex:atttribte.

I have input fields on both the Main Visualforce page and Custom Component page but when I'm trying to save the record(The save button and method is in the main page) the update from the custom component is not being saved.

Here's my code:

Main Visualforce Page:

  <apex:page standardController="Account" extensions="AccountTestController">
            <apex:form>
                <apex:messages/>
                <apex:pageBlock title="Page Section">
                    <apex:pageBlockButtons>
                        <apex:commandButton action="{!saveAcc}" value="Save"/>
                    </apex:pageBlockButtons>
                    <apex:pageBlockSection>
                        <apex:inputField value="{!acc.LastName}" required="true"/> 
                    </apex:pageBlockSection>
                </apex:pageBlock>
            </apex:form>
            <c:AccoutnComponent accRecord="{!acc}"/>
</apex:page>

Main Page Controller:

public class AccountTestController {

    public Account acc {get; set;}

    public AccountTestController(ApexPages.StandardController stdController) {
        if(stdController.getID() != null) {
            acc = [SELECT Id, LastName,Name, Phone, isPersonAccount FROM Account WHERE Id=: stdController.getID()];
        } else {
            acc = new Account();
        }

    }

    public PageReference saveAcc() {
        upsert acc;

        return new PageReference('/');
    }

}

Custom Component Page:

<apex:component controller="AccountComponentController">
    <apex:attribute name="accRecord" assignTo="{!pageAcc}" description="Account from Main Page" type="Account"/>
    <apex:form>
        <apex:pageBlock title="Component Section">
            <apex:pageBlockSection>
                <apex:outputField value="{!pageAcc.Name}"/>
                <apex:inputField value="{!pageAcc.Phone}" required="true"/>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:component>

Custom Component Controller:

public class AccountComponentController {
    public Account pageAcc {get; set;}

    public AccountComponentController() {

    }    
}

Here's how it looks

It seems that I was able to retrieve the values from the main page since the Last Name is being reflected from the component page, it's just that the update from the field in the component section is not being saved upon clicking the Save button from the Main Page.

Am I doing something wrong here? Enlighten me please.

Thanks!

Answer 1

Always try avoiding duplicate forms in your maarkup.The code has two forms here and hence the issue .Use single form always .

Answer 2

You can leave the Form tag on both the main Visualforce page and the Component. Just move the call to the component within the Form tag of the main page not after the tag.