How to Create a Login Form with Ajax

An Ajax login form can send data to the server and display an error message without requiring a page refresh. This can make the process of logging in less painful for the user. Here's how to program an Ajax login form.

  1. Create an HTML document.
    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
  2. Create a script block inside your document and write a function named login() that will make the Ajax request when the form is submitted.
    function login(form) {
        var un = form.Username.value;
        var pw = form.Password.value;
        var xmlhttp = new XMLHttpRequest();"post", "Login", true);
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
  3. Write an event listener that will register an eventListener for the form when the page loads.
    window.addEventListener(window,"load", function() {
        var loginForm = document.getElementById("LoginForm");
        window.addEventListener(loginForm, "submit", function() {
  4. Create a form.
    <form id="LoginForm" onsubmit="return false">
        <h1>Login Form</h1>
        <div class="FormRow">
            <label for="Username">Username:</label>
            <input type="text" size="15" id="Username" name="Username">
        <div class="FormRow">
            <label for="Password">Password:</label>
            <input type="password" size="15" id="Password" name="Password">
        <div class="FormRow" id="LoginButtonDiv">
            <input type="submit" value="Login">
        <div id="BadLogin">
            <p>The login information you entered does not match
            an account in our records. Please try again.</p>
  5. Write a function to receive the results of the Ajax login and display the response text.
    function loginResults() {
        var loggedIn = document.getElementById("LoggedIn");
        var badLogin = document.getElementById("BadLogin");
        if (xmlhttp.responseText.indexOf("failed") == -1) {
            loggedIn.innerHTML = "Logged in as " + xmlhttp.responseText;
   = "block";
   = "none";
        } else {
   = "block";
            form.Username.className = "Highlighted";
            setTimeout(function() {
       = 'none';
            }, 3000);
  6. Test the form. This example code assumes that your login script is available at /Login, relative to the location of the script. You can customize the Login function and the path to your script for your own needs.
    Result of Running the Demo Scripts
Author: Chris Minnick

Chris Minnick, the co-founder of WatzThis?, has overseen the development of hundreds of web and mobile projects for customers from small businesses to some of the world’s largest companies. A prolific writer, Chris has authored and co-authored books and articles on a wide range of Internet-related topics including HTML, CSS, mobile apps, e-commerce, e-business, Web design, XML, and application servers. His published books include Adventures in Coding, JavaScript For Kids For Dummies, Writing Computer Code, Coding with JavaScript For Dummies, Beginning HTML5 and CSS3 For Dummies, Webkit For Dummies, CIW E-Commerce Designer Certification Bible, and XHTML.

About Webucator

Webucator provides instructor-led training to students throughout the US and Canada. We have trained over 90,000 students from over 16,000 organizations on technologies such as Microsoft ASP.NET, Microsoft Office, Azure, Windows, Java, Adobe, Python, SQL, JavaScript, Angular and much more. Check out our complete course catalog.