ng-submit not working in angularjs

Question

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.

Off

try put the save button inside the <form> – Greatnephew

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. – Ant

Answer 1

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

Off

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! – Teel

Blegh, I have the same problem (function not getting called when form submit button clicked) and my submit button is definitely inside my form. – Beater

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. – Djerba

Get more upvotes and include in your answer the fact that the button must have type="submit" too – Malliemallin

Mine was outside of the form too. Thanks for the heads up. – Detoxicate

Interesting fact: It also works without submit button, if the form only has one input. – Bradytelic

Answer 2

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.

Djerba

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

Neither works for me, but changing an ng-if on the btn to ng-show, solves the problem. What could be the problem? – Alexina

Answer 3

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

Demodulation

Answer 4

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

Bevan

Answer 5

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.

Poesy

Answer 6

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

Jilli

Please read how to answer. – Aile

This does not provide a definitive answer to the question, please edit your post – Dihedron