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

Leverage socket.io in various routes within a node.js application

In my Node.js application, I have various routes defined in the router.js file. Now, I want to implement socket.io in every route to enable real-time communication between my Node.js and React.js applications. However, the structure of my Node.js applicati ...

Leveraging the outcome of an API request with Protractor

I have developed a small API that generates test data instantly. Each request creates a new user and provides the relevant data. For fetching the data, I utilize the 'request' package: var flow = protractor.promise.controlFlow(); var result = f ...

Error message in JavaScript saying "The response string is undefined

I am working on a program built in angularjs. Currently, I receive JSON data from the server when online, but I am now developing an offline mode for the application. Despite trying to tackle the issue, I am unable to identify why I cannot resolve it. In ...

Ways to initiate a page redirection within the componentWillReceiveProps lifecycle method

When my webpage or component generates a form and sends it to the backend API upon submission, I receive an object in return if the process is successful. This object is then added to my redux store. In order to determine whether the reducer successfully ...

Having trouble loading the image source using JSON in Vue.js

var topArticle=new Vue({ el:'#toparticle', data:{topmostArticle:null}, created: function(){ fetch('topnews.json') .then(r=>r.json()) .then(res=>{this.topmostArticle=$.grep(res,functi ...

Even after being removed, the input field in Firefox stubbornly maintains a red border

I have a project in progress that requires users to input data on a modal view and save it. The validation process highlights any errors with the following CSS snippet: .erroreEvidenziato { border: 1px solid red; } Here is the HTML code for the moda ...

Retrieve the data attribute from a specific dropdown menu using jQuery

Here is the code snippet I am currently working with: $('.tmp-class').change(function() { $('.tmp-class option:selected').each(function() { console.log($('.tmp-class').data('type')); }) ...

Updating state parameters using `$transition$.params` can be achieved by following a few simple steps

I created the state with the help of $stateProvider like this: (function() { 'use strict'; angular.module('app').config(stateConfig); function stateConfig($stateProvider) { $stateProvider .state('base ...

Enclose each instance of "Rs." with <span class="someClass">

I'm facing an issue with the currency symbol "Rs." appearing in multiple places on my website. I want to enclose every instance of this text within <span class="WebRupee">. However, if it's already wrapped in <span class="WebRupee">, ...

Adjust the colors of the borders upon clicking the button

Hello, I'm attempting to create a function where clicking on one button changes its border color to blue and changes the border color of all other buttons to orange. However, I'm encountering an issue where the border color for the other buttons ...

Store the injected HTML within a PRE tag as a variable

My question pertains to a DIV HTML element that is responsible for displaying some HTML content from a variable: <div contenteditable="true" ng-bind-html="renderHtml(currentOperation.description)" ng-model='currentOperation.description&a ...

The server is unable to process the request for /path

After browsing various posts, I am still unable to identify the root cause of my issue. I am developing a donation page for an organization and need to verify if PayPal integration is functioning correctly. The error I am encountering lies between my form ...

Cannot display data in template

After successfully retrieving JSON data, I am facing trouble displaying the value in my template. It seems that something went wrong with the way I am trying to output it compared to others. My function looks like this, getUserInfo() { var service ...

Error: Attempted the use of 'append' method on an object lacking the implementation of FormData interface, with both processData and contentType set to false

Apologies for any English errors. I am attempting to use ajax to submit a form, and here is my JavaScript code: $("#formPublicidad").on('submit', function(event) { event.preventDefault(); var dataForm = new FormData(document.getElementBy ...

Get the latest html content and save it as a .html file using javascript or jQuery

Looking for a way to save an HTML page as a .html file? Having some trouble with jQuery modifications not being included in the exported file? Check out the code snippet below and let me know if you can spot what's going wrong! I'm still getting ...

Troubleshooting Issue with JQuery Date Picker: Date Not Valid

Encountering an issue when using the date from JQuery DatePicker in an SQL Statement variable, resulting in an error of invalid datetime string. Even after attempting to format it with DateTime.Parse or Convert.DateTime. JQuery DatePicker <script> ...

Scraping data from a webpage using Node.js and the Document Object Model

I am attempting to extract information from a specific website using Node.js. Despite my best efforts, I have not made much progress in achieving this task. My goal is to retrieve a magnet URI link which is located within the following HTML structure: < ...

Angular 6: Utilizing async/await to access and manipulate specific variables within the application

Within my Angular 6 application, I am facing an issue with a variable named "permittedPefs" that is assigned a value after an asynchronous HTTP call. @Injectable() export class FeaturesLoadPermissionsService { permittedPefs = []; constructor() { ...

When the user clicks, I plan to switch the audio source

I am looking to update the audio source when a button is clicked, but I am having trouble getting it to work. image description data() { return { audioSrc: '' } }, methods: { setActiveAudio(item) { this.$refs.audioE ...

Observing the innerHTML of a Vue component

Currently, I am utilizing an npm package called vue3-markdown-it to display markdown within some of my content. When the component renders, I need to access its innerHTML and make customized modifications before displaying it in my div. However, there is ...