Disable submit button after one click in angularJS

Question

I would like to disable button after one click.

Code:

<button id="submitRequest" class="btn btn-primary btn-active"
        ng-disabled="!frmRequest.$valid||!r.DataUseAgreement||(!chkBMT&&!chkOncore&&!chkCAISIS&&!chkLIMS&&!chkFCR)"
        ng-click="SaveData()">
  <i class="fa fa-save"></i> Submit
</button>

How to disable this one after one click?

Thanks!

what do you mean *by one click*? – Pankaj Parkar Jul 27 '16 at 16:26 — Pankaj Parkar, Jul 27 '16 at 16:26
all inputs, checkboxes and selects add required – Cem Arguvanlı Jul 27 '16 at 16:31 — Cem Arguvanlı, Jul 27 '16 at 16:31

score 6 · Answer 1 · answered Jul 27 '16 at 16:31

6

Simple. You write to element a bit of javascript, like onclick="this.disabled=true" .

<button id="submitRequest" onclick="this.disabled=true" class="btn btn-primary btn-active" ng-disabled="!frmRequest.$valid||!r.DataUseAgreement||(!chkBMT&&!chkOncore&&!chkCAISIS&&!chkLIMS&&!chkFCR)" ng-click="SaveData()"><i class="fa fa-save"></i> Submit</button>

answered Jul 27 '16 at 16:31

EddNewGate

527
5
19

2

This will disable the button one click,but it doesnt allow form submission too for first click. – Hema Mar 28 '17 at 07:12

Hema · Answer 2 · 2017-03-28T07:35:19.550

5

Disabling button after one click

<input type="submit" name="Submit" class="btn btn-primary"
value="Submit" ng-disabled="button.disabled"/>

In Controller,where u submit the form just add

scope.button={};
scope.button.disabled=true;

This disables the button after one click form submission

edited Mar 28 '17 at 07:35

answered Mar 28 '17 at 07:27

Hema

988
1
16
38

score 2 · Answer 3 · answered Jul 27 '16 at 17:37

In your SaveData() function, add below line in beginning of function:

$scope.saving=true;

then, in your ng-disabled condition, add additional condition:

saving||!frmRequest.$valid||!r.DataUseAgreement||(!chkBMT&&!chkOncore&&!chkCAISIS&&!chkLIMS&&!chkFCR)

score 0 · Answer 4 · answered Jul 10 '17 at 15:29

It is quite straight forward. You just have to add one more Boolean condition in your ng-disable statement.

 <button class="btn btn-info" ng-click="ctrl.isSubmit()" ng-disabled="ctrl.submitClicked">Submit</button>

And in your Controller

var vm=this;
vm.submitClicked=false;

vm.isSubmit= function(){
vm.submitClicked= true;
}

Here is a Plunker that I made for you

Disable submit button after one click in angularJS

4 Answers4

Linked