I have a button which on click will save the form information. The problem is, user instead of clicking 1's on the "Save" button clicks on it multiple times as long as it disappears on the screen. With this, I am saving same form which inturn throw duplicate exceptions. Please help me. Thanks in advance.

<button ng-click="myFunc()">Save</button>

In above code, myFunc() is triggered with the number of times user clicks.

I have a button which on click will save the form information. The problem is, user instead of clicking 1's on the "Save" button clicks on it multiple times as long as it disappears on the screen. With this, I am saving same form which inturn throw duplicate exceptions. Please help me. Thanks in advance.

<button ng-click="myFunc()">Save</button>

In above code, myFunc() is triggered with the number of times user clicks.

• javascript
• jquery
• html
• angularjs

6 Answers 6

Use a $scope variable and ng-disabled to update the click and check for the variable,

<button  ng-click="myFunc()" ng-disabled="buttonClicked"></button>

Controller

$scope.buttonClicked = true;

I think disable the button after the first click will help you to solve this issue.

That's in case you want this feature related to multiple buttons:

JS:

$scope.disabled = {};
$scope.myFunc = function(identifier) {
    $scope.disabled[identifier] = 1;
    ...
}

HTML:

<button  ng-click="myFunc(identifier)" ng-disabled="disabled.identifier"></button>

In case that you want this feature only on one button:

JS:

$scope.disabled = 0;
$scope.myFunc = function() {
    $scope.disabled = 1;
    ...
}

HTML

<button  ng-click="myFunc()" ng-disabled="disabled"></button>

You can disable your submit button after the first click to prevent duplicate entry. For Example, you have HTML something like,

 <div ng-app="mydemo" ng-controller="myController">
        <button type="submit" ng-disabled="isDisabled" ng-click="myFunc()"> Submit</button>
    </div>

angular.module('mydemo', [])
    .controller('myController',function($scope){

    $scope.isDisabled = false;

    $scope.disableButton = function() {
        $scope.isDisabled = true; // To disable Button
    }

    });

This way you can disable button. It will surely work for you. Thanks.

create a directive for this, so that it can be reused

app.directive('clickAndDisable', function() {
  return {
    scope: {
      clickAndDisable: '&'
    },
    link: function(scope, iElement, iAttrs) {
      iElement.bind('click', function() {
        iElement.prop('disabled',true);
        scope.clickAndDisable().finally(function() {
          iElement.prop('disabled',false);
        })
      });
    }
  };
});

so use click-and-disable="myFunc()" rather than ng-click

Hiding the form after first click resolved this issue.