function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Hema YejjuHema Yejju 

I want the lightning button to be disabled after user clicks on 'Payment' button

Hi, I have a lightning aura component and i am using one button in .cmp

 <aura:attribute name="showthisButton" type="boolean" default="false"/>
 <aura:attribute name="state" type="String" />
<aura:attribute name="response" type= "String" />
<lightning:button variant="brand" label="Yes" class="slds-align_absolute-center"
                            title="Payment" onclick="{!c.sendEmailNow}"
                             />

In Controller:
 sendEmailNow: function(component, event, helper){
        helper.sendEmailNow(component, event, helper);

In Helper:

sendEmailNow : function(component,event,helper) {
      var accountId = component.get("v.accountId");
      console.log('in here----'+accountId);
      
      var action = component.get('c.getdetails');//apex class method
      action.setParams({ 'AccountId' : accountId });
      
      action.setCallback(this, function(response){  
          var state = response.getState();
          var error= response.getError();
          
           if (state === "SUCCESS") {
               
            component.set('v.showthisButton',false); 
        
          } else if (state === "INCOMPLETE") {
              
            
              alert ("Failed ");
          }else if (state === "ERROR") {
              var errors = response.getError();
              if (!errors) {
                  errors = [{"message" : "Unknown Error Occured"}];
              }
              alert ("Error occured"+errors);
          }
         
        
          
         
     });
      $A.enqueueAction(action); 
     
  }
Maharajan CMaharajan C
Hi Hema,

Please try the below :

HTML:

Add the aura:id in button 
<aura:attribute name="showthisButton" type="boolean" default="false"/>
<aura:attribute name="state" type="String" />
<aura:attribute name="response" type= "String" />
<lightning:button variant="brand" label="Yes" class="slds-align_absolute-center"
                            title="Payment" onclick="{!c.sendEmailNow}" aura:id="PaymentBtn"
                             />

Helper JS:

use   component.find("PaymentBtn").set("v.disabled", true); 
sendEmailNow : function(component,event,helper) {
      var accountId = component.get("v.accountId");
      console.log('in here----'+accountId);
      var action = component.get('c.getdetails');//apex class method
      action.setParams({ 'AccountId' : accountId });
      action.setCallback(this, function(response){  
          var state = response.getState();
          var error= response.getError();
           if (state === "SUCCESS") {
              component.find("PaymentBtn").set("v.disabled", true);
            //component.set('v.showthisButton',false); 
          } else if (state === "INCOMPLETE") {
              alert ("Failed ");
          }else if (state === "ERROR") {
              var errors = response.getError();
              if (!errors) {
                  errors = [{"message" : "Unknown Error Occured"}];
              }
              alert ("Error occured"+errors);
          }
     });
      $A.enqueueAction(action); 
     
  }

Thanks,
Maharajan.C
Hema YejjuHema Yejju
Hi mAharajan,
Tried your code ...After clicking on that button it was not getting disabled .after few seconds like 5 to 10 middle its getting disabled ..but i need immediate action on the button click l..any ther alternative please???
Maharajan CMaharajan C
sendEmailNow : function(component,event,helper) 
{
      var accountId = component.get("v.accountId");
      console.log('in here----'+accountId);
      var action = component.get('c.getdetails');//apex class method
      action.setParams({ 'AccountId' : accountId });
      action.setCallback(this, function(response){  
          var state = response.getState();
          var error= response.getError();
           if (state === "SUCCESS") {
              
            //component.set('v.showthisButton',false); 
          } else if (state === "INCOMPLETE") {
              //component.find("PaymentBtn").set("v.disabled", false); 
              alert ("Failed ");
          }else if (state === "ERROR") {
              //component.find("PaymentBtn").set("v.disabled", false); 
              var errors = response.getError();
              if (!errors) {
                  errors = [{"message" : "Unknown Error Occured"}];
              }
              alert ("Error occured"+errors);
          }
     });
      $A.enqueueAction(action); 
     
  }

Controller:
  
sendEmailNow: function(component, event, helper){
        component.find("PaymentBtn").set("v.disabled", true);
        helper.sendEmailNow(component, event, helper);
}

Then put disable logic it in the controller method ... Your apex class is taking time so there is few seconds like 5 to 10... So moved the button disable in controller... Also in failure or Incomplete if you want you can undisable the button...

Thanks,
Maharajan.C