0

I currently have an issue where users are button mashing a custom VFP Lead convert page and converting a lead into multiple Accounts. Based on the direction of this POST I was able to partially resolve this issue by disabling the convert button. The problem is I have two sets of buttons, one on top and on the bottom and this fix is only applying to the top set of buttons. See picture below:

example

I would like to disable both the top and bottom 'Convert' button when they are clicked. Can anyone assist with this? Below is my current VFP Code:

<apex:page id="LeadConvertOpptyOption" standardController="Lead" extensions="customLeadConvert">
    <head>
        <apex:stylesheet value="{!URLFOR($Resource.SLDS2018, 'styles/salesforce-lightning-design-system.css')}" />
        <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script>

        <style>
            .opptyRecType{
                color: #4a4a56;
                font-family: Arial,Helvetica,sans-serif;
                font-weight: bold;
                font-size: 91%;
                float: left;    
            }
        
            #checkbox {
                float: left;
            }
        </style>
        <script>
            $( document ).ready(function() {
                console.log( "ready!" );
                var x = $('[id$=checkbox]').is(':checked');
                if(!x){
                    $(".opptyRecType").hide();
                }
            });
        </script>
        <script type="text/javascript">
            function markClicked(){
                var x = $('[id$=checkbox]').is(':checked');
                console.log('ready x:: ' + x);
                if(x) {
                    // Checkbox is checked..
                    $(".opptyRecType").show();
                } else {
                    // Checkbox is not checked..
                    $(".opptyRecType").hide();
                }
            }
            
                                function disableBttn() {
                    console.log('Button Clicked');
                    var btn = document.querySelector("[id$='ConvertBttn']");
                    btn.className = 'btn btnDisabled';
                    btn.disabled = 'disabled';
                    return false;
                }
        </script>
    </head>

<!--"{!$Component.LeadConvertOpptyOption.ConvertForm.ConvertLeadBlock.ConvertButtons.ConvertBttn}"-->

    <apex:pageMessages />
    
    <apex:form id="ConvertForm">
        <script>

        </script>
        <apex:pageBlock title="Convert Lead" id="ConvertLeadBlock" mode="edit">
            <apex:pageBlockButtons id="ConvertButtons">
                <apex:commandButton value="Convert" id="ConvertBttn" onclick="return disableBttn()" action="{!convertLeadToAcctContOppty}"/><!--convert button--> <!-- this will either convert the lead to just an account and contact OR all three oppty, acct, and cont-->
                <apex:commandButton value="Cancel" action="{!Cancel}"/> <!--cancel button-->
            </apex:pageBlockButtons>
            <apex:pageBlockSection columns="1">
                <apex:pageBlockSectionItem >
                <apex:outputLabel value="Create Opportunity?"/>
                        <!--<apex:inputCheckbox value="{!objLead.CreateConvertedOppty__c}" onClick="markClicked()" id="checkbox"/>-->
                        <apex:inputCheckbox value="{!createOppty}" selected="true" onClick="markClicked()" id="checkbox"/>
                </apex:pageBlockSectionItem>
                <!--only display this section if the value of inputCheckbox == true-->
                <apex:outputPanel styleClass="opptyRecType">
                    <apex:pageBlockSectionItem >
                        <apex:outputLabel id="lblOppRecType" value="Opportunity Record Type "/>
                        <apex:selectList id="ddlOppRecType" size="1" multiselect="False" value="{!objRecType}">
                            <apex:selectOptions value="{!OpportunityRecordType}" />
                        </apex:selectList>
                    </apex:pageBlockSectionItem>
                </apex:outputPanel>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Here are the following snippets that I updated in the process of resolving this issue:

To Disable the button on click:

                                function disableBttn() {
                    console.log('Button Clicked');
                    var btn = document.querySelector("[id$='ConvertBttn']");
                    btn.className = 'btn btnDisabled';
                    btn.disabled = 'disabled';
                    return false;
                }

To call the JS to Disable the button:

                <apex:commandButton value="Convert" id="ConvertBttn" onclick="return disableBttn()" action="{!convertLeadToAcctContOppty}"/>

How can I get the bottom 'Convert' button to be disabled as well? Any Assistance would be greatly appreciated.

3
  • If you don't need the bottom buttons you could add location="top" to your pageBlockButtons tag. If you do need both sets of buttons, you'll need to determine the id of the second button element in the page and update this markup var btn = document.querySelector("[id$='ConvertBttn']"); to select it in addition to the first button.
    – Mark Pond
    Apr 9, 2021 at 16:19
  • That makes sense, thanks for the suggestion/answer
    – Max
    Apr 9, 2021 at 16:39
  • @MarkPond I am finding that when I include the onclick="return disableBttn()" the action is not being called within the button.
    – Max
    Apr 9, 2021 at 16:53

1 Answer 1

1

Since you're already using jQuery:

function disableBttn() {
    $("[id$='ConvertBttn']").addClass("btn btnDisabled");
    $("[id$='ConvertBttn']").attr("disabled","disabled");
    return false;
}

querySelector only brings back the first matched item. You would want to querySelectorAll, or use the jQuery above, which does the same thing.

3
  • I am finding that when i include the onclick="return disableBttn()" the action is not being called within the button.
    – Max
    Apr 9, 2021 at 16:52
  • The button cannot be disabled before the form is submitted. Disabled form elements aren't included in the POST - the result is that the server does not know which button was clicked and so the related action is not called. Here's a related question I helped with a few years ago that may help you too. salesforce.stackexchange.com/q/7729/660
    – Mark Pond
    Apr 9, 2021 at 20:02
  • @Max Return false prevents the default behavior (in this case, form submission). Just don't return a value, it should work as you expect
    – sfdcfox
    Apr 9, 2021 at 20:16

You must log in to answer this question.

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