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:
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.
location="top"to yourpageBlockButtonstag. 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 markupvar btn = document.querySelector("[id$='ConvertBttn']");to select it in addition to the first button.onclick="return disableBttn()"the action is not being called within the button.