rashadb rashadb - 7 months ago 174
Javascript 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.

Answer

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

    });
Comments