Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 561
Shamoon Avatar asked Feb 17 '14 14:02

Shamoon


People also ask

How to use ng-submit in AngularJS?

AngularJS ng-submit DirectiveThe ng-submit directive specifies a function to run when the form is submitted. If the form does not have an action ng-submit will prevent the form from being submitted.

Why we use ngsubmit?

The ng-submit Directive in AngularJS is used to specify the functions to be run on submit events. It can be used to prevent the form from submission if it does not contain an action. It is supported by <form> element.


2 Answers

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

like image 190
Shamoon Avatar answered Oct 18 '22 04:10

Shamoon


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.

like image 23
Amarnath Avatar answered Oct 18 '22 06:10

Amarnath