CODEWITHSUNDEEP
javascripthtmlangularjs
user4752891
user4752891

Reputation:

AngularJS output text box value after clicking button

I have a simple form in angularjs, that inputs value a and value b. when I click the button, I want the values to be alerted out. How do I do that?

<div ng-controller="myController">
    <p><label>value a : </label><input type="text" ng-model="valuea" name="valuea" id="valuea" /></p>
    <p><label>value b  : </label><input name="valueb" id="valueb" ng-model="valueb"/></p>

    <button type="button" ng-click = "add()"  >Sign In</button> 
</div>

<script>
   angular.module('myApp', [])
   .controller('myController', ['$scope', function($scope) {
   function myController($scope) {
       $scope.add = function(){
           alert("valuea:"+$scope.valuea);
           alert("valueb:"+$scope.valueb);
       } 
   };
}]);

Upvotes: 0

Views: 664

Answers (2)

Farzan Najipour
Farzan Najipour

Reputation: 2503

Here is the answer :

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myController">
      <p>
        <label>value a : </label><input type="text" ng-model="valuea" name="valuea" id="valuea" />
      </p>
      <p>
        <label>value b : </label><input name="valueb" id="valueb" ng-model="valueb" />
      </p>

      <button type="button" ng-click="add()">Sign In</button>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
  $scope.add = function() {
    alert("valuea:" + $scope.valuea);
    alert("valueb:" + $scope.valueb);
  }
});
</script>

</body>
</html>

Upvotes: 0

random
random

Reputation: 7891

There are certain issues with your code. In your html there is no module myApp. Also within your controller callback, there is no need to add the separate function with the controller name function myController() {}.

angular.module('myApp', [])
   .controller('myController', ['$scope', function($scope) {
       $scope.add = function(){
           alert("valuea: "+$scope.valuea);
           alert("valueb: "+$scope.valueb);
       } 
}]);
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
      <p><label>value a : </label><input type="text" ng-model="valuea" name="valuea" id="valuea" /></p>
      <p><label>value b  : </label><input name="valueb" id="valueb" ng-model="valueb"/></p>
      <button type="button" ng-click = "add()"  >Sign In</button>
  </div>
</div>

See working fiddle - https://jsfiddle.net/otqzk6ua/

Upvotes: 1

Related Questions