function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion

Blur button after click of the button - angularjs

Hi Guys, 

I have a requirement where on the click of the button, I need the button to be greyed out so that user should not be able to click the button again. 
I have code written in angularjs. Can anybody let me know how I can achive this functionality?

Code Snippet: 

<div ng-show="ForRegistration"> <input type="button" ng-click="saveLead( true );" ng-dbclick="" ng-disabled="myForm.$pristine || myForm.$dirty && myForm.$invalid" value="Continue" class="btn btn-default" role="button"/> <input type="button" ng-click="saveLead( false );" ng-dbclick="" ng-disabled="myForm.$pristine || myForm.$dirty && myForm.$invalid" value="Add another attendee/customer" class="btn btn-default" role="button"/> </div>

Please note, I am not familiar with angularjs any assitance much appriciated. 

Prateek Singh SengarPrateek Singh Sengar
Hi Prasan,
I have implemented similar funcitonality however not used angular. A simple implementation of similar functionality is explained at the below link
Hrishikesh PednekarHrishikesh Pednekar
  This visualforce page shows how to blur all buttons while a record is getting updated. It shows
  two buttons :- Save and Cancel. When the account name is modified and Save is clicked, then both
  the Save and Cancel buttons are blurred till the account gets updated. Browse for this page using
  where 0017F0000057kcj is the id of any account record and vfBlurButton is the name with which this
  VF page is saved.
<apex:page controller="AccountController" sidebar="true" id="page1">

  <apex:outputpanel id="errorPanel1">
    <apex:pageMessages id="errorMessages1"/>
  <script type="text/javascript">
    function disableAllButtonsJS()
        var savingButtonObj = document.getElementById('page1:form1:pageBlock1:idPageBlockButtons:savingBtnId');
        // Make the Saving... button visible till the record is being saved using style.display='block' ='block';

        var saveButtonObj = document.getElementById('page1:form1:pageBlock1:idPageBlockButtons:saveBtnId');
        // Make the Save button invisible till the record is being saved using style.display='none' ='none';

        var cancelButtonObj = document.getElementById('page1:form1:pageBlock1:idPageBlockButtons:idCancel'); ='none';

        var cancelDisabledButtonObj = document.getElementById('page1:form1:pageBlock1:idPageBlockButtons:cancelDisabledBtnId');
        // Make the disabled Cancel button visible till the record is being saved using style.display='block' ='block';


  <apex:form id="form1">
    <apex:actionFunction name="afSave" action="{!save}"/>
    <apex:pageBlock id="pageBlock1">                
      <apex:pageBlockButtons location="top" id="idPageBlockButtons">
        <div id="container" style="width:100%">                   
          <div id="left" style="float:left;width:6%;">
            <apex:commandButton onclick="disableAllButtonsJS();" value="Save" 
               rerender="errorPanel1" style="display:block" id="saveBtnId"/>

          <div id="middle" style="float:left;width:15%;">                       
            <apex:outputPanel style="display:none" id="savingBtnId">
              <apex:image value="/img/loading32.gif" style="height: 15px;"/>
              <apex:commandButton value="Saving..." disabled="true"/>
          <div id="right" style="float:left;width:50%;">
            <apex:commandButton id="idCancel" value="Cancel" action="{!cancel}" style="display:block"/>
            <apex:commandButton value="Cancel" disabled="true" style="display:none" id="cancelDisabledBtnId"/>
      <apex:outputLabel value="Name of account: "/>
      <apex:inputField value="{!a.Name}"/>

The controller class :-
public class AccountController
    public Account a {get;set;}
    public AccountController()
        a = [Select Id, Name from Account where id = :ApexPages.currentPage().getParameters().get('id')];
    public pageReference save()
        update a;
        return null;
    public pageReference cancel()
        a = [Select Id, Name from Account where id = :ApexPages.currentPage().getParameters().get('id')];
        return null;