Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

prevent multiple form submissions using angular.js - disable form button

I want to prevent multiple form submissions using angular.js. The question is related to this question.

When the user clicks on a form submit button the value / label of the submit button should change to "loading..", status of the button will be set to disabled AND the submit event should be triggered in the normal way, leading to a submit call to the server. This way the user would see the following effect:

  1. Immediately: The submit button value changes to "loading.." and gets disabled

  2. As soon as the server responds: user gets presented the result of the server request (whereas server responds are handled without angular intervention)

I created this plunk to show what I mean. My issue relates to this line: elm.attr('disabled',true); . This does not only disable the button, but also prevent to propagate the submit event. Thus I get a disabled button (desired result), but the form does not get submitted (undesired result).

You can see the changing behavior if you comment / uncomment this line : elm.attr('disabled',true);

Any idea how to change this?

like image 826
Thomas Kremmel Avatar asked Apr 04 '13 09:04

Thomas Kremmel


2 Answers

The easiest and most common way of doing it is to rely on $submitted property of form object like so:

<form name="formName" ng-submit="submit()">
  ...
  <button type="submit" ng-disabled="formName.$submitted">Submit</button>
</form>
like image 114
mpospelov Avatar answered Sep 24 '22 01:09

mpospelov


Try a $timeout (the angularjs function)

$timeout(function(){
    elm.attr('disabled',true);
}, 0)
like image 32
Arun P Johny Avatar answered Sep 22 '22 01:09

Arun P Johny