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

Question

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

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

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

<button OnClientClick="disableButton()" type="submit">Submit</button>
<button ng-disabled="isDisabled" type="submit">Submit</button>

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

Is this to get the button 'disabled' or just to prevent from sending? You are making the button disabled with that angular function, but why don't you check to see if !$scope.isDisabled on your other function? — Jake Rowsell, May 01 '15 at 09:43
Modify your someFun like this $scope.someFun = function() {} — Ranga Reddy, May 01 '15 at 09:55
Good look, $scope.someFun is the right way and I tried it. It did not fix the problem though. — rashadb, May 01 '15 at 10:13
I want the button to submit once and only once. That's all. It call $scope.someFunc(); once that is done, it should be able to submit multiple times. — rashadb, May 01 '15 at 10:14

Wahid Kadwaikar · Accepted Answer · 2015-05-01T10:21:00.700

49

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;
    }

    });

edited May 01 '15 at 10:21

answered May 01 '15 at 09:48

Wahid Kadwaikar

768
7
10

Ya, I tried this and my submit (not ng-click) function calls my function where $scope.isDisabled = true; is on the first line inside the function and $scope.isDisabled = false is on the outside of the function. My button is as displayed above as submit. – rashadb May 01 '15 at 09:58
Okay. So is it working? If not, can you provide me with a working [plunker](http://plnkr.co) link of your code so that we can look into it? – Wahid Kadwaikar May 01 '15 at 10:02
@rashadb I've updated the above code with button type as "submit". I hope this helps. – Wahid Kadwaikar May 01 '15 at 10:22
this doesn't fire the submit form in asp.net. – CularBytes Feb 29 '16 at 16:28
1

The angular property $submitted becomes false when the button is disabled like this which may cause you issues depending on implementation. – Arkiliknam Mar 03 '17 at 14:57

score 12 · Answer 2 · answered Apr 29 '16 at 03:53

12

Another way is to write a directive which disables the submit button

    angular.module('myApp').directive('clickedDisable', function(){
    return {
        restrict: 'A',
        link: function(scope, ele, attrs){
            $(ele).click(function(){
                $(ele).attr('disabled', true);
            });
        }
    };

And in the HTML

    <button type="submit" clicked-disable></button>

answered Apr 29 '16 at 03:53

Arun Ghosh

7,634
1
26
38

what is $ here? Jquery? – uylmz Jun 24 '16 at 13:16
1

technically speaking its jqLite unless you're also loading jquery in which case jquery actually takes over the $. – Brandon Jul 13 '16 at 15:26

score 6 · Answer 3 · answered Aug 24 '16 at 08:20

I didn't like any of the provided answers as they all clutter the global scope with the isDisabled variable, why not do it this way instead?

<button type="submit" ng-click="disableButton($event)">Submit</button>

.

$scope.disableButton = function($event) {
    $event.currentTarget.disabled = true;
};

if if you need to submit a form before the disable.

this code is not tested

<form ng-submit="disableFormSubmitButton($event)">
    <button type="submit">Submit</button>
</form>

.

$scope.disableFormSubmitButton = function($event) {
    $($event).find('[type=submit]').prop('disabled',true);
};

score 4 · Answer 4 · edited Apr 22 '19 at 05:15

4

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.

disabling all form controls between submit and server response

disable button on $http/$q calls

how to perform a check on ng-disabled

edited Apr 22 '19 at 05:15

RavatSinh Sisodiya

1,596
1
20
42

answered May 01 '15 at 09:49

VikrantMore

903
7
25

I look over all of these before asking the question. Most of these are a bit too much for my use case. I have a simple form with three inputs and a submit button. Most examples come with ng-click. I need type="submit" for my button. – rashadb May 01 '15 at 10:02
2

@rashadb AngularJS is mostly used for single page applications, and in such cases you should not use the "submit" action, and better handle the form submission through Ajax using Angular $http – Jiju Thomas Mathew Dec 22 '16 at 18:09

score 1 · Answer 5 · answered May 01 '15 at 10:02

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

score 1 · Answer 6 · answered Mar 10 '17 at 18:38

For what it's worth, you can do that directly in the template:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>

  <button ng-disabled="isDisabled" ng-click="isDisabled=true" type="submit">Submit</button> isDisabled={{isDisabled}}

</body>

score 0 · Answer 7 · answered May 01 '15 at 10:21

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.

score 0 · Answer 8 · edited May 23 '17 at 12:10

0

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.

edited May 23 '17 at 12:10

Community

1
1

answered Aug 05 '15 at 18:40

irsick

1

score -1 · Answer 9 · answered May 01 '15 at 09:56

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

score -1 · Answer 10 · edited Apr 22 '17 at 21:04

-1

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
    <button type="submit" name="submit" class="btn btn-success" ng-disabled="isDisabled" ng-click="isDisabled=true">Hochladen</button> isDisabled={{isDisabled}}
</body>

edited Apr 22 '17 at 21:04

Floern

33,559
24
104
119

answered Apr 22 '17 at 11:19

Sarius

57
1
1
4

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

10 Answers10

Linked