0

I want the Send Button on a visualforce page to disappear after the user clicks on it. How can this be done? I tried the javascript you can see between the script tags but it didn't work!

This is my page:

<apex:page standardcontroller="Edition__c" extensions="MyCtrl">
    <apex:pagemessages />
    <apex:form >
        <apex:pageblock id="IdPB">
            <apex:pageblocksection columns="1" title="Message1" collapsible="false" html-style="font-size: 20px; ">
                <apex:inputfield value="{!Edition__c.Data_Send__c}" rendered="false"/>
            </apex:pageblocksection>
            <apex:pageblockbuttons location="bottom" id="bottoni">
                <apex:commandbutton action="{!Send}" value="Send" style="width: 200px; height: 50px; font-size: 20px;" onclick="DisableSendButton();" />
                <apex:commandbutton action="{!Return}" value="Return" style="width: 200px; height: 50px; font-size: 20px; " />
            </apex:pageblockbuttons>
        </apex:pageblock>
    </apex:form>
    <apex:pagemessages />
    <script>
        function DisableSendButton() {
            document.getElementById(Send).onclick = function() {
                this.disabled = true;
            }
        }
    </script>
</apex:page>

2 Answers 2

2

You can hide the button by changing display property to none through JavaScript in onclick property:

<apex:pagemessages id="pageMessage"/>
<apex:commandbutton action="{!Send}" 
    value="Send" 
    style="width: 200px; height: 50px; font-size: 20px;" 
    onclick="this.style.display = 'none'" 
    rerender="pageMessage"/>
2
  • Yes,It works!but when I click Send Button the page reload and the button is visible again. How can I keep the button hidden also after the reload? Jan 19, 2017 at 15:38
  • set rerender property to stop reloading, check updated answer
    – Raul
    Jan 19, 2017 at 15:41
0

Try this ;)

In the function DisableSendButton you are binding click event not; To disable the button on click do like this:

<apex:page standardcontroller="Edition__c" extensions="MyCtrl">
    <apex:pagemessages />
    <apex:form >
    <apex:pageblock id="IdPB">

    <apex:pageblocksection columns="1" title="Message1" collapsible="false" html-style="font-size: 20px; ">
            <apex:inputfield value="{!Edition__c.Data_Send__c}" rendered="false"/>
            </apex:pageblocksection>
            <apex:pageblockbuttons location="bottom" id="bottoni">

                <apex:commandbutton action="{!Send}" value="Send" style="width: 200px; height: 50px; font-size: 20px;" onclick="DisableSendButton(this);" />
                <apex:commandbutton action="{!Return}" value="Return" style="width: 200px; height: 50px; font-size: 20px; " />

            </apex:pageblockbuttons>


        </apex:pageblock>
    </apex:form>
    <apex:pagemessages />
    <script>
        function DisableSendButton(btn){
            btn.disabled = true;
        }
    </script>
</apex:page>
1
  • Unfortunately, It still doesn't work! Any other idea? Maybe the ctrl code could help? Jan 19, 2017 at 13:15

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .