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

前端未结

关注

 10  1998

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

相关标签:

10条回答

逝去的感伤

2020-12-23 14:45
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

悲哀的现实

2020-12-23 14:47

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>

0 讨论(0)

误落风尘

2020-12-23 14:54
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.
0 讨论(0)
发布评论:

提交评论
- 加载中...

别跟我提以往

2020-12-23 14:54

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

0 讨论(0)

有刺的猬

2020-12-23 14:58

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

0 讨论(0)

花落未央

2020-12-23 15:02

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

    });

0 讨论(0)

1 2 下一页

热议问题