How do I submit a form when input ng-change in AngularJS

Question

What is the "AngularJS way" of doing a form submit when any of its inputs have been clicked (or changed)?

<form ng-submit="submit($event)" id="myForm">
  <input type="checkbox" name="foo" value="bar" ng-click="???"/>
</form>

I'm tempted to use jQuery and simply doing ng-click="$('#myForm').submit()", but it's probably worth learning it properly.

I have tried doing ng-click="submit($event)", but the error here is the $event object within the scope of the input instead of the entire form (correct me if I'm wrong, this is what I'm getting from the documentation).

Peter Mortensen · Accepted Answer · 2017-01-07 15:22:36Z

4

Well, you can do something like this for sure by triggering the AngularJS submit event:

$scope.change = function($event) {
    $timeout(function() {
        angular.element($event.target.form).triggerHandler('submit');
    });
};

where

<input type="checkbox" name="foo" value="bar" ng-click="change($event)" />

However I think it's better to simply use the same function in ngClick as used in ngSubmit.

Demo: http://plnkr.co/edit/tJIYD9ZVjYzwA2aXJobo?p=preview

edited Jan 7, 2017 at 15:22

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 21, 2014 at 9:29

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

7 Comments

Helen Che Over a year ago

Trying this now, quick question: I'm trying to log the query string for the form (i.e. ?foo=bar) in my $scope.submit function. In jQuery I would use $(event.currentTarget).serialize();. How would I console.log the query string using plain angular/jQLite?

dfsq Over a year ago

Why do you need it? If you plan to send data with AJAX call then $http service will serialize data for you from the object. If you use jQuery you can still use $.param({...}).

dfsq Over a year ago

Make sure you use ngModel directive on your input elements, like

<input type="checkbox" name="foo" ng-model="model.check" value="bar" ng-click="change($event)" /> <input type="text" ng-model="model.name">

, etc. Then you will be able to access model data as $scope.model - will give you an object of data, which you can send to backend using $http.

Helen Che Over a year ago

Unfortunately I don't have a say in how I implement the ajax requests, I must obtain the query string.

dfsq Over a year ago

Yes, in angular it's a little less convenient. There are different approaches. Take a look at this question: stackoverflow.com/questions/14514461/…

|

thebiggestlebowski · Accepted Answer · 2016-02-24 17:13:19Z

1

ng-change is what worked for me using a text input:

<form>
    <select data-ng-model="headerName" data-ng-options="header for header in headers"
            data-ng-change="calculateCorrelations()"></select>
</form>

answered Feb 24, 2016 at 17:13

thebiggestlebowski

2,8391 gold badge35 silver badges34 bronze badges

Collectives™ on Stack Overflow

How do I submit a form when input ng-change in AngularJS

2 Answers 2

Demo: http://plnkr.co/edit/tJIYD9ZVjYzwA2aXJobo?p=preview

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Demo: http://plnkr.co/edit/tJIYD9ZVjYzwA2aXJobo?p=preview

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related