CODEWITHSUNDEEP
javascriptangularjs
spaceDog
spaceDog

Reputation: 461

Angular form not submitting

all I am new to Angular, so I am messing around with Angular 1,

I followed what the docs say, but when I click submit, it does not trigger the function I made in the controller.

So I have one side of the page to load the profiles I created that works, it loads up profiles in the database.

On the other side, I have a form to submit a profile. My question is why athleteCreateCtrl is not triggered when I hit submit?

What am I doing wrong, please help!

<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-4 col-md-4 col-lg-4">
        <div class="form-group" ng-controller="athleteCreateCtrl">
          <form ng-submit="addAthlete()">
            <label for="name">Name</label>
            <input id="name" type="text" name="name" class="form-control" ng-model="name" />
            <br  />


            <button type="button" class="btn btn-info" style="width: 100%">Submit</button>
          </form>
        </div>
      </div>
      <div class="col-sm-4 col-md-8 col-lg-8" >
        <div ng-controller="athletesCtrl">
          <div class="row">
            <div ng-repeat="athlete in athletes">
              <span>{{athlete.name}}</span>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</section>

This is my app.js 

var app = angular.module('Athlete',['ngRoute']);

app.config(['$routeProvider', function($routeProvider){
    $routeProvider.
        when('/',{
            templateUrl: 'views/Athlete.view.html',
            controller: 'athletesCtrl'
        }).
            when('/',{
        templateUrl: 'views/Athlete.view.html',
        controller: 'athleteCreateCtrl'
    }).
        otherwise({redirectTo: '/'})
}]);

athletes.controller.js

angular.module("Athlete")

.controller('athletesCtrl', ['$scope','$http', function($scope, $http){
    $http.get('/athlete').success(function(data){
        $scope.athletes = data.athletes;
    });
}])
.controller('athleteCreateCtrl', ['$scope', '$http', '$routeParams', function($scope, $http){
    $scope.addAthlete = function(){
        var data = {
            name: $scope.name,
        }
        $http.post('/athlete', data).success(function(data, status) {
            console.log(status);
        });
    }
    $http.get('/athlete').success(function(data){
        $scope.athletes = data.athletes;
    });
}]);

Upvotes: 1

Views: 128

Answers (1)

lagrange-
lagrange-

Reputation: 215

Change button type to "submit".

<button type="submit" class="btn btn-info" style="width: 100%">Submit</button>

Upvotes: 3

Related Questions