How do you disable the submit button after a single click to prevent multiple submissions in Angularjs?

Question

How do you disable the submit button after a single click to prevent multiple submissions in Angularjs?

I've looked all over the web including several stack overflow examples for a solution to the question. To be specific, I tried this:

HTML

<button OnClientClick="disableButton()" type="submit">Submit</button>

JS

var disableButton = function (){ document.getElementById('<%= btnSubmit.ClientID %>').disabled = true; }

And this:

HTML

<button ng-disabled="isDisabled" type="submit">Submit</button>

JS

    $scope.isDisabled = false;
var someFunc = function(){
$scope.isDisabled = true;}

Neither worked as advertised. Any other suggestions? Please Angular suggestions only. Thank you.

javascript
html
angularjs

Answer 1

You were very close to the answer. The only thing you missed out was calling the someFunc() function on button using ng-click.

The other issue is, in your controller the function should be $scope.someFunc() and not var someFunc()

Working example: Your index.html should be like:

<html>

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
    <script src="application.js"></script>
  </head>

  <body ng-app="demo" ng-controller="demoController">
          <button type="submit" ng-disabled="isDisabled" ng-click="disableButton()"> Click me to disable myself</button>
  </body>

</html>

And your controller application.js be like:

angular.module('demo', [])
    .controller('demoController',function($scope){

    $scope.isDisabled = false;

    $scope.disableButton = function() {
        $scope.isDisabled = true;
    }

    });

Answer 2

Try using this:

<input type="text" ng-model="email" ng-disabled="button" required ng-init="button=true">
<a class="btn" ng-click="button=false">enable edit</a>
<a class="btn" ng-click="button=true">disable edit</a>
<a class="btn" ng-click="button=!button">toggle edit</a>

Also there are different approaches to achieve this functionality, you can go through following links, they will surely help.

http://stackoverflow.com/a/21638542/4373895

http://stackoverflow.com/a/22720438/4373895

http://stackoverflow.com/a/17083781/4373895

Answer 3

Find the working example also.

HTML

  <body ng-app="DisableButtonApp">
        <div ng-controller="MyAppCtrl">
            <button ng-click="someFunc()" ng-disabled="isDisabled" ng-model="isDisabled"type="submit">Submit</button>
        </div>
    </body>

JS:

angular.module('DisableButtonApp', [])
    .controller('MyAppCtrl',['$scope', function($scope){
    $scope.isDisabled = false;
    $scope.someFunc = function(){
        alert("Clicked!");
        $scope.isDisabled = true;
        return false;
    };
}]);

Demo

Answer 4

Here is the answer I got to work for my single form submission scenario:

$scope.increment = 0;
$scope.someFunc = function() {
     $scope.increment++
     if($scope.increment > 1) {
          return;
     } else {
          //do something else
   }
}

No directives or HTMl necessary.

Answer 5

Because of historical reasons single (or ) inside submits form if type is not 'submit'.

According to MDN, button can may have type attribute.

<button type="button">Your button</button>

makes button have no default behavior.

Here is more detailed answer.

Answer 6

Add <input type="checkbox" ng-model="isDisabled"> and add isDisabled in ng-disabled attribute ng-disabled="isDisabled" , so when you select checkbox button is disabled and deselect checkbox, enable button.

Please see link http://plnkr.co/edit/e3w54TZEmfj8h5O6BX7B?p=preview