AngularJS form won't submit
Question
I have this simple HTML form as below and I am using the Angular js (see the controller. - the is the form is not getting submitted and for some reason I am not able to read the values. i checked online and other questions on Stack overflow, but no success. Any pointers or guidance - what am i missing? thanks in advance :
<!doctype html> <html ng-app="auth"> <head> <title>Hello AngularJS</title> </head> <body> <form method="post" ng-submit="login()" novalidate ng-controller="Login"> DBID<input type="text" name="dbId" value="23" ng-model="dbId" /> UserName<input type="text" name="username" value="test@test.com" ng-model="username" /> Password<input type="text" name="password" value="test1234" ng-model="password" /> <input type="submit" id="submit" value="login" /> <pre>list={{list}}</pre> <p>The Token is: {{token}}</p> </form> <script src="Scripts/angular.js"></script> <script src="Scripts/login.js"></script> </body> </html>
Here is my AngularJS controller:
var auth = angular.module('auth', []); auth.controller('Login', function ($scope, $http) { $scope.login = function () { if ($scope.dbId) { $scope.list.push(this.dbId); $scope.text = ''; } }; var Credentials = new Object(); Credentials.DBID = "23"; Credentials.username = "test@test.com"; Credentials.password = "test1234"; $http({ dataType: 'json', method: 'POST', url: 'http://localhost:55049/api/Security/Login', data: Credentials, headers: { 'Content-Type': 'application/json', 'Authorization': 'Basic VGVzdEFwcGxpY2F0aW9uVG9rZW46' } }).then(function (response) { $scope.token = response.data; }); });
Thanks
2 answers
solution1
1 2017-09-22 16:32:14
i think you are closing the login function brace too early. adjusted it and try again.
var auth = angular.module('auth', []); auth.controller('Login', function ($scope, $http) { $scope.login = function () { if ($scope.dbId) { $scope.list.push(this.dbId); $scope.text = ''; } var Credentials = new Object(); Credentials.DBID = "23"; Credentials.username = "test@test.com"; Credentials.password = "test1234"; $http({ dataType: 'json', method: 'POST', url: 'http://localhost:55049/api/Security/Login', data: Credentials, headers: { 'Content-Type': 'application/json', 'Authorization': 'Basic VGVzdEFwcGxpY2F0aW9uVG9rZW46' } }).then(function (response) { $scope.token = response.data; }); }; });
solution2
0 ACCPTED 2017-09-22 16:36:28
I added some modifications to the JavaScript code and it's working fine. Please take a look and run the sample code to see it in action. Also I changed the username, DBID and password to be dynamic with input values.
var auth = angular.module('auth', []); auth.controller('Login', function($scope, $http) { $scope.list = []; $scope.login = function() { if ($scope.dbId) { $scope.list.push(this.dbId); $scope.text = ''; var Credentials = new Object(); Credentials.DBID = $scope.dbId; Credentials.username = $scope.username; Credentials.password = $scope.password; alert("Posting your data: " + JSON.stringify(Credentials)); $http({ dataType: 'json', method: 'POST', url: 'http://localhost:55049/api/Security/Login', data: Credentials, headers: { 'Content-Type': 'application/json', 'Authorization': 'Basic VGVzdEFwcGxpY2F0aW9uVG9rZW46' } }).then(function(response) { $scope.token = response.data; }); } else { alert("Please add DBID"); } }; });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="auth" ng-controller="Login"> <form method="post" ng-submit="login()" novalidate ng-controller="Login"> DBID<input type="text" name="dbId" value="23" ng-model="dbId" /> UserName <input type="text" name="username" value="test@test.com" ng-model="username" /> Password <input type="text" name="password" value="test1234" ng-model="password" /> <input type="submit" id="submit" value="login" /> <pre>list={{list}}</pre> <p>The Token is: {{token}}</p> </form> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.