Execute CommandButton Action Before JS Function (Without Controller)

Question

SOLVED: See my answer below.

I have a VF component on our opportunity detail page where users can enter input values on an apex form. There are multiple apex commandbuttons that produce another VF page rendered as a word document, using the apex form values and opportunity record values. I would like the process to run in this order: enter in values, click button, records save to opportunity, VF page renders as word doc, user remains on the same page.

I have everything working, except the apex commandbutton's standard {!save} action is firing AFTER the VF page renders as the word doc, so the word doc does not contain the apex form values. Is there any way I can execute a standard save action BEFORE the word doc is rendered so all values are passed through?

As of now, this process is successful if users enter form values, click the button, wait for the page to "refresh" with rendered doc, and click the button again. So it's not an issue of the form values not saving, it's the issue of the execution order.

I would like to do this without adding in a controller. Is this possible? I'm open to using "oncomplete" and an actionfunction, but I have been unsuccessful so far in my attempts. Below is my code, any help would be greatly appreciated.

  
    <apex:form id="form" >    
        
        <apex:pageBlock >
        <apex:outputPanel layout="block" styleClass="custom1">

            <apex:pageBlockSection columns="1">
                <apex:inputField value="{!Opportunity.Value1}"/>
                <apex:inputField value="{!Opportunity.Value2}"/>
                <apex:inputField value="{!Opportunity.Value3}"/>
                <apex:inputField value="{!Opportunity.Value4}"/>
                <apex:inputField value="{!Opportunity.Value5}"/>
                <apex:inputField value="{!Opportunity.Value6}"/>
                <apex:inputField value="{!Opportunity.Value7}"/>
                <apex:inputField value="{!Opportunity.Value8}"/>
            </apex:pageBlockSection>
</apex:outputPanel>


   
            <apex:pageBlockButtons location="bottom">             
                <apex:commandButton action="{!save}" rerender="none" value="Generate X Proposal" onclick="codeAddress();"/>
                <apex:commandButton action="{!save}" rerender="none" value="Generate Y Proposal" onclick="codePlaceholder();"/>            
                    
                                          
            </apex:pageBlockButtons></apex:pageBlock></apex:form>      

<script type="text/javascript">

function codeAddress() {
   window.open('apex/XProposalDraft?id={!id}');
}

function codePlaceholder() {
   window.open('/apex/YProposalDraft?id={!id}');
}


</script>    
</apex:page>```

Answer 1

You need to use VisualForce remoting, as you need to wait for the response from apex and then open another page

<script type="text/javascript">
    function getRemoteAccount(e) {        
        Visualforce.remoting.Manager.invokeAction(
            '{!$RemoteAction.remotingController.getAccount}',
            function(result, event){
                console.log('result  ',result)
                //once you get the result you can open another page.
                if (event.status) {
                  window.open('apex/generatePDF'); 
                } 
            }, 
            {escape: true}
        );
    }
    </script>

you can go over this article - https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_js_remoting_example.htm

Answer 2

SOLVED: I was able to solve this with a minor update to my command button. I tried MANY combinations, but the only combination that worked for my use-case was to change the action from save to quicksave and to change onclick to oncomplete. Now, my form input values save before the second vf page generates a word document and the user remains on the same page. It also works much smoother than before because it doesn't take nearly as long to load. I hope this helps!

Original button:

<apex:commandButton action="{!save}" rerender="none" value="Generate X Proposal" onclick="codeAddress();"/>
<apex:commandButton action="{!save}" rerender="none" value="Generate Y Proposal" onclick="codePlaceholder();"/>

Updated button:

<apex:commandButton action="{!quicksave}" rerender="none" value="Generate X Proposal" oncomplete="codeAddress()"/>
<apex:commandButton action="{!quicksave}" rerender="none" value="Generate Y Proposal" oncomplete="codeAddress()"/>