having difficulty sending the username and password from the HTML page to the controller in AngularJS

In my AngularJS controller, I am having trouble retrieving the values of the username and password fields after submitting the login form. Here is the HTML code for the form:

     <form class="form-signin" action="" method="post">
                        <span id="reauth-email" class="reauth-email"></span>
                        <input type="text" ng-model="username" id="Username" name="Username" class="form-control" placeholder="Email address" required autofocus>
                        <input type="password" ng-model="password" id="password" name="password" class="form-control" placeholder="Password" required style="margin-top:10px">
                        <div id="remember" class="checkbox">
                            <label>
                                <input type="checkbox" value="remember-me"> Remember me
                            </label>
                        </div>
                        <input type="hidden" name="" value="" />
                        <input class="btn btn-lg btn-primary btn-block btn-signin"  type="button" value="{{btntext}}" ng-click="login()" >
                    </form>

This script uses AngularJS

var app = angular.module('homeapp', []);
app.controller('HomeController', function($scope, $http) {
  $scope.username = '';
  alert($scope.username);
  $scope.btntext="Login";
  $scope.login=function () {
  $http.get("/account/loginverify")
  .then(function(response) {
    $scope.myWelcome = response.data;
    if(response.data=="1"){
      window.location.href='home.html'
    } 
    else  {
      alert("Invalid username or password...!!!")
    }
  });
}
});

Answer №1

To connect your controller with the HTML template, you should utilize the ngController directive. Refer to the code snippet below for an example:

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

app.controller('HomeController', function($scope, $http) {
  $scope.username = '';
  $scope.btntext = "Login";
  $scope.login = function() {
    console.log($scope.username, $scope.password);
  
    //$http.get("/account/loginverify")
    //  .then(function(response) {
    //    $scope.myWelcome = response.data;
    //    if (response.data == "1") {
    //      window.location.href = 'home.html'
    //    } else {
    //      alert("Invalid username  or password...!!!")
    //    }
    //  });
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<form class="form-signin" action="" method="post" ng-app="homeapp" ng-controller="HomeController">
  <span id="reauth-email" class="reauth-email"></span>
  <input type="text" ng-model="username" id="Username" name="Username" class="form-control" placeholder="Email address" required autofocus>
  <input type="password" ng-model="password" id="password" name="password" class="form-control" placeholder="Password" required style="margin-top:10px">
  <div id="remember" class="checkbox">
    <label>
      <input type="checkbox" value="remember-me"> Remember me
    </label>
  </div>
  <input type="hidden" name="" value="" />
  <input class="btn btn-lg btn-primary btn-block btn-signin" type="button" value="{{btntext}}" ng-click="login()">
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Can angularJS unit tests be executed using the angular-cli command `ng test`?

In my current project, I am working on an AngularJS 1.6.X ES6 application and utilizing Mocha and Sinon for writing and running unit tests. Recently, I began the process of hybridizing/upgrading this application using ngUpgrade to incorporate new componen ...

What is preventing Javascript from executing a function when there is an error in another function?

Can you explain why a JavaScript function fails to run if there is an error in another function? Recently, I encountered an issue on my HTML page where the alert from the popup1() function would not load. It turns out the problem stemmed from an error in ...

Filter a Vue list based on a checkbox that can be either checked or unchecked

I am currently working on my Vue app and aiming to filter a list to display only entries that have been moderated. However, I am encountering an issue where when the checkbox is checked, I receive all the results that are true, and when the checkbox is un ...

There seems to be an issue with the Google reCAPTCHA login, as it is displaying an error with the code 'invalid-input-secret'

Customer Interface: grecaptcha.ready(function() { grecaptcha.execute('6Le4oroZABBXXIQCQkAYCXYSekNQnWExTeNUBZ-B', {action: 'submit'}).then(function(token) { $scope.userData['repatcha_token'] = token $ht ...

Organization and Naming Standards for Projects

After exploring the Repeating module name for each module component issue, we have decided to adopt the organizational recommendations outlined in the Best Practice Recommendations for Angular App Structure blog post. This approach has been implemented in ...

Is there a way to eliminate the auto-opening feature of WordPress Shortcode Ultimate Accordion on mobile devices with the help of jquery

Currently, I am utilizing the Accordion feature of Wordpress Shortcode Ultimate plugin. Although the plugin does offer an option to open the accordion on page load, I would like to have them closed by default on mobile devices. How can I achieve this usin ...

The Express server automatically shuts down following the completion of 5 GET requests

The functionality of this code is as expected, however, after the fifth GET request, it successfully executes the backend operation (storing data in the database) but does not log anything on the server and there are no frontend changes (ReactJS). const ex ...

Error: StalePageException occurred in the wicket framework

I am currently using Wicket version 6.20. Within a Wicket page, I have implemented an AbstractDefaultAjaxBehavior to capture mouse clicks and their x,y coordinates: class CallFromJavaScript extends AbstractDefaultAjaxBehavior { private static final l ...

Updating the component's state based on the server response

Injecting the props into the initial state of a component is something I'm working on. The goal is to update the state and have the data reflected immediately when a button inside the component is clicked. The eventData object contains two attributes ...

What is the best way to manage a file upload process?

What is the process for handling a file uploaded through curl in an express js action/route? router.route('/images') .post (function(req, res) { res.status(200); res.json({ message: 'file uploaded' }); }); app.u ...

Create a default function within a mongoose field

Is there a way to achieve the following in my code: var categorySchema = new Schema({ id: { unique: true, default: function() { //set the last item inserted id + 1 as the current value. } }, name: String }); Can this be done? ...

Experiencing difficulty retrieving the variable within a NodeJs function

Currently, I am utilizing the NodeJS postgresql client to retrieve data, iterate through it and provide an output. To accomplish this, I have integrated ExpressJS with the postgresql client. This is a snippet of my code var main_data = an array conta ...

Using latitude and longitude coordinates to calculate the xyz position on earth in a three-dimensional environment (three

Exploring the wonders of three.js I am currently working on rendering objects at specific geocoordinates on a large sphere. I am close to finding a solution, but I am struggling to determine the correct xyz position from latitude and longitude. I have cr ...

The feature to hide columns in Vue-tables-2 seems to be malfunctioning

The issue I'm facing is with the hiddenColumns option not working as expected. Even when I set it to hiddenColumns:['name'], the name column remains visible. I've updated to the latest version, but the problem persists. UPDATE I am tr ...

Moving information from one controller to another, or the process of converting a controller into a service

Is there a way for me to transfer information from one controller to another? Or can I create a service from a controller? Specifically, I am looking to retrieve coordinates and store them in an object along with other variables. When I try to inject depen ...

Angular 2 has its own version of $q.when called RxJs

Back in the AngularJS 1.* days, I used to have this code snippet to refresh the auth-token: ... if (!refreshTokenInProgress) { refreshTokenInProgress = AuthService.refreshToken(); } $q.when(refreshTokenInProgress, function () { refreshTokenInProgre ...

Transmitting a JSON string to my backend system to insert into my database, but unfortunately, no data is being added

I've been facing a challenging issue with my code Currently, I am attempting to insert an object into my database using jQuery/AJAX. Despite not encountering any errors, the data is not getting added to my DB. Here is the snippet of my JS/JQuery cod ...

The Threejs Blender exporter is exporting in an incorrect format

I'm attempting to convert a blender model into a threejs JSON format using the provided blender exporter. However, when I try to parse the JSON file, I encounter an error: Uncaught TypeError: Cannot read property 'length' of undefined The ...

swap out an element in an array with an extra element

My array contains elements with both id and des properties. I would like to add an additional property like value:0 to each object in the array. I achieved this using a loop. let data = [ { "id": 1001, "des": "aaa" }, { ...

Upgrade to a more stable configuration version for Nodemailer as the current configuration is not supported. Consider down

I'm currently utilizing Nodemailer version 2.6.4 with Node version 6.9.1 var nodemailer = require("nodemailer"); var wellknown = require('nodemailer-wellknown'); var transporter = nodemailer.createTransport("SMTP",{ service: "yahoo", ...