8

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
  • 30,738
  • 21
  • 105
  • 131
Helen Che
  • 1,951
  • 5
  • 29
  • 41

2 Answers2

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

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
dfsq
  • 191,768
  • 25
  • 236
  • 258
  • 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? – Helen Che Dec 21 '14 at 09:46
  • 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 Dec 21 '14 at 09:53
  • Make sure you use ngModel directive on your input elements, like ` `, 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`. – dfsq Dec 21 '14 at 09:55
  • Unfortunately I don't have a say in how I implement the ajax requests, I *must* obtain the query string. – Helen Che Dec 21 '14 at 10:08
  • Okay, if you need query string you should anyway give form elements `ngModel` directive like `ng-model="model.username"`, etc. Then in controller in submit function use `$scope.model` object to construct query string using simple for loop `for (var key in $scope.model) { ... }`. Using jQuery it would be just `$.param($scope.model)`. – dfsq Dec 21 '14 at 10:11
  • The issue I have with that approach is handling checkboxes. The old fashion non-ajax way is simple: give checkboxes `name="colors[]"` and be done with it. I'm having trouble handling arrays in my query string using the `ngModel`. – Helen Che Dec 21 '14 at 10:24
  • 1
    Yes, in angular it's a little less convenient. There are different approaches. Take a look at this question: http://stackoverflow.com/questions/14514461/how-can-angularjs-bind-to-list-of-checkbox-values – dfsq Dec 21 '14 at 10:49
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>
thebiggestlebowski
  • 2,610
  • 1
  • 33
  • 30