Disable button after form submit

Question

Sounds easy and a well known question, right? I thought so as well. How do I do this in angularJS.

CSHTML

@using (Html.BeginForm("Order", "Shop", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
 <div class="container" ng-app="order" ng-controller="orderController">
      <button type="submit" ng-disabled="orderButtonClicked" ng-click="orderClicked()" class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>
</div>
}

AngularJS

angular.module("order", [])
.controller("orderController", ['$scope', '$http','$filter', function ($scope, $http, $filter) {

    $scope.orderButtonClicked = false;

    $scope.orderClicked = function () {
    $scope.orderButtonClicked = true;

    }    
}]);

As many others reported as well, the form is not submitting when disabling or removing the button. this answer did the same, he claims it is working, but for me is a no go.

You can assume that angular is setup correctly, disabling the button works fine.

In general, I've found the best way to do this is to *hide* the submit button on click, rather than removing or disabling it - regardless of what js library or server backend I'm using. I then replace it with something that looks like a disabled submit button, or a progress bar, or whatever is appropriate for the task at hand. — Dave, Feb 29 '16 at 17:32
Thanks Dave, while this isn't really nice to see a button go away when clicking on it, it does work with `ng-hide`. — CularBytes, Feb 29 '16 at 17:42
Well, it doesn't have to go away, at least not as far as the user knows - see my answer. — Dave, Feb 29 '16 at 17:44

score 1 · Accepted Answer · answered Feb 29 '16 at 17:43

I've never had much luck with disabling the submit button in any circumstances - even if it doesn't prevent the form from submitting, the server can get confused because it expects the name/value combination from the submit button.

Instead, I generally hide the submit button, and replace it with something appropriate:

    <button type="submit" ng-show="!orderButtonClicked" ng-click="orderClicked()" class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>
    <button ng-show="orderButtonClicked" disabled class="btn btn-primary btn-block tf-btn btn-lg">Place Order</button>

Keep in mind that even in this case, the user may be able to re-submit by hitting enter in a textbox.

score 0 · Answer 2 · edited Mar 06 '16 at 20:34

0

Does the form submit if you don't disable or remove the button? The angular documentation states that, "For this reason, Angular prevents the default action (form submission to the server) unless the <form> element has an action attribute specified."
So, depending on what you're trying to accomplish, you would have to add javascript in your .orderClicked method to make an ajax call, for example, or whatever you're trying to accomplish.

edited Mar 06 '16 at 20:34

Mr Lister

45,515
15
108
150

answered Feb 29 '16 at 16:56

John Way

227
1
5
17

Yes, the form submits if I take out the `ng-disabled` attribute. What I am trying to accomplish is to disable the button when submitting the form, so that no duplicated form submissions are executed. – CularBytes Feb 29 '16 at 17:01

score 0 · Answer 3 · answered Feb 29 '16 at 17:06

0

Try this way:

<div ng-app="myApp" ng-controller="myCtrl">
    <form>
        <input type="submit" ng-disabled="orderButtonClicked" ng-click="orderClicked()">
    </form>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
    $scope.orderButtonClicked = false;

    $scope.orderClicked = function () {
        $scope.orderButtonClicked = true;
    }
});
</script>

answered Feb 29 '16 at 17:06

Han Arantes

775
1
7
19

You mean switching the form and div around, right? Done that, didn't work – CularBytes Feb 29 '16 at 17:13
it's weird not work.. maybe some other script is interfering in that behaviour, try to put my code inside some simple html page, works like a charm! – Han Arantes Feb 29 '16 at 17:21

score 0 · Answer 4 · answered Feb 29 '16 at 17:21

0

I will put a break point there and see if orderButtonClicked is set to true when orderClicked() is triggered. Just another thought, I have experience with this issue before when I have an ng-if somewhere inside the controller scope in html. This is because angular seems to create a new scope inside that ng-if dom. The best way to avoid that is to use controllerAs and then access the scope property using controllerName.propertyName.

answered Feb 29 '16 at 17:21

dannielum

346
1
10

Hi, I can put a breakpoint on it or just print a console, ether way I am 100% sure that it is true and my button gets disabled. The controllerAs.. yea I have this in my other pages, you convinced me to switch this page around as well, unfortunately, it does not solve the problem. – CularBytes Feb 29 '16 at 17:36
try to put it inside a $timeout(). See if forcing another digest cycle will update the dom. – dannielum Feb 29 '16 at 17:49

Disable button after form submit

4 Answers4