Login page with jQuery and AJAX

A Login page is one of the basic requirement when creating a registration based website where the user can register to the website and sign in to its account to manage.

In this case, you can use AJAX to create an user-friendly login page.

Which checks the entered username and password in the MySQL database table without reloading the web page. If the user is not available then show an error message on the screen otherwise redirect the user to a new page.

Login page with jQuery and AJAX


  1. Table structure
  2. Configuration
  3. HTML
  4. PHP
  5. jQuery
  6. Conclusion


1. Table structure

I am using users table in the tutorial example.

CREATE TABLE `users` (
  `username` varchar(80) NOT NULL,
  `password` varchar(80) NOT NULL

It has following users –

id username password
1 yssyogesh 12345
2 sona 123456
3 vishal 32145
4 vijay 147526


2. Configuration

Create a new PHP file (config.php). This file contains database connection.

Completed Code

$host = "localhost";    /* Host name */
$user = "root";         /* User */
$password = "";         /* Password */
$dbname = "tutorial";   /* Database name */

$con = mysql_connect($host, $user, $password) or die("Unable to connect");

// selecting database
$db = mysql_select_db($dbname, $con) or die("Database not found");


Creating a login page which contains two input box for entering username and password. A submit button to send AJAX request with jQuery.

Completed Code

<div class="container">

    <div id="div_login">
        <div id="message"></div>
            <input type="text" class="textbox" id="txt_uname" name="txt_uname" placeholder="Username" />
            <input type="password" class="textbox" id="txt_pwd" name="txt_pwd" placeholder="Password"/>
            <input type="button" value="Submit" name="but_submit" id="but_submit" />


4. PHP

Create a new checkUser.php file from their check the $_POST username and password in the users table. If the query returns more than 0 value means the user exists in the table.

Initialize $_SESSION['uname'] variable when query count(*) return more than 0 value and echo 1 otherwise echo 0.

Completed Code

include "config.php";

$uname = mysql_real_escape_string($_POST['username']);
$password = mysql_real_escape_string($_POST['password']);

if ($uname != "" && $password != ""){

    $sql_query = "select count(*) as cntUser from users where username='".$uname."' and password='".$password."'";
    $result = mysql_query($sql_query);
    $row = mysql_fetch_array($result);

    $count = $row['cntUser'];

    if($count > 0){
        $_SESSION['uname'] = $uname;
        echo 1;
        echo 0;



When login user is valid then redirect the user to this page.

If the $_SESSION['uname'] variable is not initiated then redirect to index.php webpage. Destroy $_SESSION['uname'] on logout button click and redirect to index.php.

Completed Code

include "config.php";

// Check user login or not
    header('Location: index.php');

// logout
    header('Location: index.php');
<!doctype html>
        <form method='post' action="">
            <input type="submit" value="Logout" name="but_logout">

5. jQuery

On login button click send AJAX request passing entered username and password as data. Redirect to home.php when the response is equal to 0 otherwise show error message on the screen.

Completed Code

        var username = $("#txt_uname").val().trim();
        var password = $("#txt_pwd").val().trim();

        if( username != "" && password != "" ){
                    var msg = "";
                    if(response == 1){
                        window.location = "home.php";
                        msg = "Invalid username and password!";

6. Conclusion

In this tutorial, I showed how you can implement AJAX login page in your project. You can use this to provide the better user interface.

Related Post

Spread the love


  1. Lushen said:

    Please Can you help me out, i am using your code exactly as is, with the same database.Though whenever iinsert the user name and password,eg sona 123456.It just comes up with the incorret username or password alert. Please could you kindly assist me.

    June 6, 2017
    • Yogesh Singh said:

      Means you have created the tutorial database and users table. Inserted all 4 records in it.

      June 7, 2017
      • Lushen said:

        I have created the database. All record are in it. Though it still says invalid username or password. Isn’t this program suppose to check if they record are present, and if they are. Then they can login.

        June 7, 2017
  2. imran said:

    Thanks for your login form example . Could u please give some example about the purchase or sales invoice which have the following fields. format.

    ItemID Item Name Qty Rate Total
    101 Item 1 5 3 15
    102 Item 2 6 7 42
    103 Item 3 7 8 56
    Total Amount 113
    The invoice should be in grid form and when i select item id then item name will automaticallly display from the database. The grid should contain edit,delete,save,search,print,csv,pdf format. Kindly resolve this problem immdeiately. both itemid and itemname should be autocomplete.

    June 24, 2017

Leave a Reply

Your email address will not be published. Required fields are marked *