28

My view:

<div class="modal" tabindex="-1" role="dialog" ng-controller="LocationController">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" ng-click="$hide()">&times;</button>
        <h4 class="modal-title">
          Add a Location
        </h4>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" role="form" ng-submit="createLocation()">
          <div class="form-group">
            <label class="col-sm-2 control-label">Name</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" placeholder="Warehouse A, Row 15, Shelf BC1, etc" ng-model="name">
            </div>
          </div>

          <div class="form-group">
            <label class="col-sm-2 control-label">Type</label>
            <div class="col-sm-10">
              <input type="text" class="form-control" placeholder="warehouse, row, shelf, etc" ng-model="type">
            </div>
          </div>

        </form>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-primary">Save</button>
        <button type="button" class="btn btn-danger" ng-click="$hide()">Cancel</button>
      </div>
    </div>
  </div>
</div>

My controller:

angular.module('mean').controller('LocationController', ['$scope', '$location', '$rootScope', 'LocationService', '$modal', '$routeParams', function ($scope, $location, $rootScope, LocationService, $modal, $routeParams) {

  $scope.createLocation = function() {
alert('afds');
    LocationService.create(this).then(function(response) {
      console.log(response);
    });
  }

}]);

Yet, when I click save, I don't get the alert. Not sure what's going on there.

Shamoon
  • 41,293
  • 91
  • 306
  • 570
  • 19
    try put the save button inside the `
    `
     – Matt Way Feb 17 '14 at 14:25
  • 2
    Worth commenting that another potential reason that an ng-submit handler function is not called is that the handler function is actually in the wrong controller. If there's no ng-submit handler function with that name in the current controller then the ng-submit will simply fail silently. – jarmod Jul 27 '17 at 18:51

6 Answers6

43

Thanks to Matt Way's comment - turns out my save button was outside my form. Fixed

Shamoon
  • 41,293
  • 91
  • 306
  • 570
  • 2
    Answered by OP with link to comment on self. This has to be the most amusingly self-referential SO answer I've seen so far. Plus it solved my problem! – Jason Swett May 02 '15 at 16:12
  • 11
    Blegh, I have the same problem (function not getting called when form submit button clicked) and my submit button is definitely inside my form. – robru May 04 '15 at 23:01
  • 1
    If the button is inside the form and still ng-submit is not working then make your button type as submit. It worked for me. – Amarnath Dec 23 '15 at 13:18
  • Get more upvotes and include in your answer the fact that the button must have `type="submit"` too – Christiaan Westerbeek Jul 13 '16 at 11:26
  • Mine was outside of the form too. Thanks for the heads up. – Prabo Jun 11 '21 at 12:57
  • Interesting fact: It also works without submit button, if the form only has one input. – fishbone Aug 05 '21 at 10:29
23

Even if the button is inside the form and still ng-submit is not working then change your button type to submit.

<button type="submit" class="btn btn-success" ng-click="login()">Login</button>

P.S: Other answers did not help me until I changed the button type to submit. Hope this helps.

Amarnath
  • 8,736
  • 10
  • 54
  • 81
  • This affects too, there has to be a submit button in the form (button or input type="submit") or ng-submit won't work. – emerino Jul 07 '16 at 07:00
  • 1
    Neither works for me, but changing an `ng-if` on the btn to `ng-show`, solves the problem. What could be the problem? – George Kagan Apr 24 '17 at 07:09
7

Maybe you should add 'novalidate' attribute on the form tag to avoid native browser validation as indicated here https://docs.angularjs.org/guide/forms

Musma
  • 924
  • 9
  • 16
3

This affects too, there has to be a submit button in the form (button or input type="submit") or ng-submit won't work.

emerino
  • 1,100
  • 11
  • 17
1

for me the problem was 'required' tag on one of the form fields. After removing this tag the form worked again. The old way of solving such problems is to try to comment part of your form and to run the code.

I prefer using 'novalidate' tag on the form, and button with type="submit" , so that the validation of the form is done by angular.

makkasi
  • 6,328
  • 4
  • 45
  • 60
-7

Silliest mistake ever, make sure you are compiling your js code.

Guest noob
  • 3
  • 1