The submit button not working AngularJS

Question

So basically wwhat I'm trying to do is take input of two numbers n1 and n2 and then print their sum all using angular. I have used bootstrap for styling. But i noticed nothing was happening so to check i added alert() function in the function to be called but still it's not getting accessed somehow. I dont know jQuery.

PS: when I use text1+text2 it's concatinating the string instead of printing the sum

This is my html:

<!DOCTYPE html>
<html ng-app="store">
  <head >
    <title>Trying Angular</title>

    <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap-theme.css">
    <link rel="stylesheet" type="text/css" href="bootstrap/dist/css/bootstrap.min.css">
  </head>
  <body>
    <form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-controller="formCtrl as formCtrl" ng-submit="formCtrl.submit()">

    <div class="form-group">
      <label>Enter n1</label>
      <input type="text" class="form-control" placeholder="enter the first number" ng-model="text1">
      <p>{{ text1}}</p>
    </div>


    <div class="form-group">
      <label>Enter n2</label>
      <input type="text" class="form-control" placeholder="enter the second number" ng-model="text2">
      <p >{{text2}}</p>

    </div>
    <div class="form-group"  style="display:block; margin:10px auto; margin-left:370px;">
      <input type="submit" class="form-control"  >
    </div>

     <p>  Your SUM of two numbers is ={{text1+text2}}</p>
   </form>

   <script src="angular.min.js"></script>
   <script  src="exp1.js"></script>
   <script src="jquery.min.js"></script>
   <script src="bootstrap/dist/js/bootstrap.min.js"></script>
  </body>
</html>

This is my angular code:

(function(){
    var app=angular.module('store',[]);

    var n1=0;
    var n2=0;

    app.controller('formCtrl',function(){
          this.submit=function(){alert("successful");}; // <----- alert()
    });
})();

It worked! thanks but i don't understand why was that needed ? I already named my controller formCtrl? — FossArduino
– FossArduino, Commented Dec 9, 2014 at 16:49
Your controller used the ControllerAs syntax - i.e. this but you had not used this in the HTML — Simon H
– Simon H, Commented Dec 9, 2014 at 16:55
So if i don't use 'this' is there any other way to call the same function? — FossArduino
– FossArduino, Commented Dec 9, 2014 at 16:59

JLRishe · Accepted Answer · 2014-12-09 17:08:06Z

5

As explained in the documentation for the ngController directive, there are two ways to access the members of a controller:

Use the as <scopeProperty> syntax, and access it using the <scopeProperty> name:

<form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-
      controller="formCtrl as fc" ng-submit="fc.submit()">

Here, fc is being declared as the name for the controller instance, and its properties are accessed with fc.

Example

Inject $scope into the controller and add properties to that:

app.controller('formCtrl', ['$scope', function($scope){
     $scope.submit = function(){alert("successful");};
}]);

<form class="form-inline" style="border: 2px solid blue; max-width:500px;" ng-
      controller="formCtrl" ng-submit="submit()">

Here, the controller's properties are added to the $scope and this allows us to access them directly in the HTML without using the dot notation.

Example

The page linked to above compares and contrasts the two approaches. You were not exactly using either, and that's why you were having trouble.

edited Dec 9, 2014 at 17:08

answered Dec 9, 2014 at 16:56

JLRishe

102k19 gold badges138 silver badges171 bronze badges

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

3 Comments

FossArduino Over a year ago

what does $scope does? I don't know jquery

JLRishe Over a year ago

$scope is not jQuery. It represents the scope of the controller. Please see the link I provided for more information.

user115014 Over a year ago

@FossArduino have a look at egghead.io/articles/new-to-angularjs-start-learning-here too

user115014 · Accepted Answer · 2016-12-20 12:01:08Z

1

It would be better to add your submit code inside a function:

app.controller('formCtrl',[$scope, function('$scope'){

    $scope.submit = function() {
        alert('submit');
    };

}]);

then in your ng-submit directive use submit() as per documentation you can also use ng-change and ng-click directives to update the models then do whatever with the models.

Further to the comments about accessing the data from the inputs: When you add the ng-model attribute to an input you are saying I would like data from this input to be stored in ng-models name. Adding this to an input: ng-model="inputvalue.input1" would enable you to store data kind of like the following:

inputvalue = {
    input1 : "Input value would go here"
}

note the names are the same for a reason.

You can then set up those objects to be stored/accessed inside the controller using $scope look at the docs on AngularJS website - take your time and get to know what's going on.

edited Dec 20, 2016 at 12:01

answered Dec 9, 2014 at 16:50

user115014

9221 gold badge14 silver badges23 bronze badges

11 Comments

FossArduino Over a year ago

Thanks but how to access the values of the inputs? I don't know jquery at all.

user115014 Over a year ago

You shouldnt need jquery, in fact it's quite confusing using the two frameworks side by side - a lot of what do using jquery is already available in Angular. The data from the inputs is stored in an object named in ng-model - I'll elaborate in my answer

JLRishe Over a year ago

@FossArduino The above doesn't involve jQuery. You would access your bound properties using $scope.text1, $scope.text2, etc.

JLRishe Over a year ago

@mjwatts Looks like you forgot to inject $scope into the controller.

JLRishe Over a year ago

@FossArduino Nobody is suggesting that you use jQuery.

|

Collectives™ on Stack Overflow

The submit button not working AngularJS

2 Answers 2

3 Comments

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related