Angularjs - ng-submit not working in form

Question

I'm new to AngularJS and I'm trying to submit a simple form using ng-submit but the button not working as well as it's not clickable, It's working on Firefox but the cursor still not changing when it's on the button and not working on Chrome.

HTML

<form novalidate name="newTripForm" ng-submit="vm.addTrip()">
      <div class="form-group">
          <label for="name">Trip Name</label>
          <input type="text" class="form-control" id="name" name="name"  ng-model="vm.newTrip.name"/>
      </div>
      <div class="form-group">
           <input type="submit"  class="btn btn-sm btn-success" id="submit" value="Add"/>
      </div>  
</form>

JavaScript

 vm.addTrip = function ()
    {
        alert(vm.newTrip.name);
    };

Answer 1

try this:

<form novalidate name="newTripForm" ng-submit="vm.addTrip()">
  <div class="form-group" ng-init="vm.newTrip.name = '';">
      <label for="name">Trip Name</label>
      <input type="text" class="form-control" id="name" name="name"  ng-model="vm.newTrip.name" required/>
  </div>
  <div class="form-group">
       <input type="submit"  class="btn btn-sm btn-success" id="submit" value="Add"/>
  </div>

Answer 2

Based on and AngularJS docs , you can have two submits on your form.

I created a quick sample based of what is on the docs and your example.

 (function() { var app = angular.module("test", []); var TestController = function() { var vm = this; vm.newTrip = { name: "" }; vm.addTrip = function() { // Some code console.log("Added " + vm.newTrip.name + " to database!"); vm.newTrip.name = ""; } } app.controller("TestController", [TestController]); })();

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> </head> <body ng-app="test"> <div ng-controller="TestController as vm"> <form novalidate name="newTripForm" ng-submit="vm.addTrip()"> <div class="form-group"> <label for="name">Trip Name</label> <input type="text" class="form-control" id="name" name="name" ng-model="vm.newTrip.name" /> </div> <div class="form-group"> <input type="submit" class="btn btn-sm btn-success" id="submit" value="Add" /> </div> </form> </div> </body> </html>

Answer 3

try this remove the form

<div class="form-group">
          <label for="name">Trip Name</label>
          <input type="text" class="form-control" id="name" name="name"  ng-model="vm.newTrip.name"/>
      </div>
      <div class="form-group">
           <button ng-click="addTrip()"></button>
      </div>

Angularjs - ng-submit not working in form

Question

HTML

JavaScript

3 answers

solution1
0 2017-11-07 13:18:25

solution2
0 2017-11-07 14:25:03

solution3
0 2017-11-08 08:05:23

Angularjs - ng-submit not working in form

Question

HTML

JavaScript

3 answers

solution1 0 2017-11-07 13:18:25

solution2 0 2017-11-07 14:25:03

solution3 0 2017-11-08 08:05:23

solution1
0 2017-11-07 13:18:25

solution2
0 2017-11-07 14:25:03

solution3
0 2017-11-08 08:05:23