CODEWITHSUNDEEP
javascriptangularjsng-submit
Shamoon
Shamoon

Reputation: 43609

ng-submit not working in angularjs

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.

Upvotes: 28

Views: 53391

Answers (6)

Guest noob
Guest noob

Reputation: 3

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

Upvotes: -7

makkasi
makkasi

Reputation: 7328

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.

Upvotes: 1

Amarnath
Amarnath

Reputation: 8865

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.

Upvotes: 23

emerino
emerino

Reputation: 1120

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

Upvotes: 3

Musma
Musma

Reputation: 934

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

Upvotes: 7

Shamoon
Shamoon

Reputation: 43609

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

Upvotes: 43

Related Questions