How to hide the button when clicking other button using VF page?

Question

We have a requirement where the customer can sign and fill the form and submit.After submitting the form the form will be saved as a attachment and the form will be emailed to the Owner of the Account as a PDF. I have achieved all the above process. But I need two command buttons to achieve the whole process. In this case customer might get confused or there is a chance for their to miss any of the button , So I have an idea to avoid this, When the customer enter into the form they can see only one button called "Submit" after clicking the submit button the page should be reloaded with the other button called "Please Review and Confirm" then the submit button should be hidden. Then the user needs to click the button to complete the form. So can anyone please guide me on how to achieve this?

Answer 1

These Help Your Scenario Visualforce page:

 <apex:page controller="Sample" sidebar="false">
    <apex:pagemessages />
    <apex:form >
        <apex:commandButton value="Disable" disabled="{!disabl}" action="{!dis}"/>
    </apex:form>
</apex:page>

Apex Controller:

public class Sample
{
    public Boolean disabl {get;set;}

    public void dis()
    {
        disabl = true;
    }
}




 ![Here is The Output ][1]

Answer 2

You can use apex:commandButton's either onclick or rendered attribute to set visibility of the button. First approach will hide the button on the client only, while second will not render the button at all:

The onclick approach:

<apex:commandButton action="{!someAction}" value="Hide On Click" onclick="this.style.display='none';"/>

The solution with rendered attribute would feature just an extension of Vineeth's approach:

<apex:outputPanel id="pnl1">
    <apex:commandButton value="Disable" action="{!dis}" rerender="pnl1" rendered="{!disabl}" />
</apex:outputPanel>