0 votes
6 views
by

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.

1 Answer

0 votes
by
 
Best answer

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.

Welcome to Memory Exceeded, where you can ask questions and receive answers from other members of the community.
You can donate any amount for Orphans village using following QR Code.
...