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.

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
– jarmod, Commented Jul 27, 2017 at 18:51

Shamoon · Accepted Answer · 2014-02-17 14:28:32Z

44

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

answered Feb 17, 2014 at 14:28

Shamoon

43.9k105 gold badges336 silver badges636 bronze badges

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

6 Comments

Jason Swett Over a year ago

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!

robru Over a year ago

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

Amarnath Over a year ago

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.

Christiaan Westerbeek Over a year ago

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

Prabo Over a year ago

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

|

Amarnath · Accepted Answer · 2016-07-13 18:43:08Z

24

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.

edited Jul 13, 2016 at 18:43

answered Dec 23, 2015 at 13:31

Amarnath

8,89510 gold badges58 silver badges85 bronze badges

2 Comments

emerino Over a year ago

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.

George Kagan Over a year ago

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

Musma · Accepted Answer · 2015-05-27 20:47:42Z

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

answered May 27, 2015 at 20:47

Musma

9349 silver badges16 bronze badges

Comments

emerino · Accepted Answer · 2016-07-07 07:01:26Z

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.

answered Jul 7, 2016 at 7:01

emerino

1,13012 silver badges17 bronze badges

Comments

makkasi · Accepted Answer · 2016-08-12 10:17:27Z

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.

answered Aug 12, 2016 at 10:17

makkasi

7,3574 gold badges49 silver badges65 bronze badges

Comments

Guest noob · Accepted Answer · 2018-02-21 23:52:45Z

-7

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

answered Feb 21, 2018 at 23:52

Guest noob

31 bronze badge

2 Comments

Carol Skelly Over a year ago

Please read how to answer.

Ibo Over a year ago

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

Collectives™ on Stack Overflow

ng-submit not working in angularjs

6 Answers 6

6 Comments

2 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

6 Comments

2 Comments

Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related