Disable submit button in AngularJS

Question

how to disable submit button in angularJs to prevent duplicate response from service.

I am new to angularJs and also this should be supported in IE 8.

what do you mean by duplicate response? are you trying to block multiple form submissions? — Jossef Harush Kadouri
– Jossef Harush Kadouri, Commented Nov 13, 2014 at 19:35
duplicate response is if I call a GET service, upon clicking the submit multiple number of times I call GET service multiple number of times and hence I get duplicate results. So, I want to disable the submit button after a single click until it loads the response. — anna
– anna, Commented Nov 13, 2014 at 19:40

Sergey Kolodiy · Accepted Answer · 2014-11-13 19:45:27Z

4

The following approach works for me.

View:

<button ng-disabled="isBusy" ng-click="buttonClick()">Load</button>

Controller:

$scope.buttonClick = function () {
    $scope.isBusy = true;
    service.getData()
    .success(function (data) {
        // Use the data
    })
    .error(function (data, status, headers, config) {
        // Log the error
    })
    .finally(function () {
        $scope.isBusy = false;
    });
}

edited Nov 13, 2014 at 19:45

answered Nov 13, 2014 at 19:39

Sergey Kolodiy

5,9491 gold badge38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ilya Vinogradov Over a year ago

Would this also work without using ng-click directive, but specifying <button type="submit" ng-disabled="..."> ? In this case the button look visually disabled, but triggers "submit" events on my controller.

Collectives™ on Stack Overflow

Disable submit button in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related