Ajax Login Form Using jQuery and PHP

Today we are going to create Ajax Login Form Using jQuery and PHP project. Before this project, we have created Ajax PHP Newsletter project using jQuery and PHP. Today our project is Login Form. We know that maximum top profile websites are using ajax for the various feature. Ajax is using for making a web page more attractive. Ajax complete actions without page loading. Let's see how to easily we can make a login page for our website. Follow instructions step by step.

Ajax Login Form How To Make

Now we are in the main point of creating Ajax Login Form. We are using Jquery, Ajax & PHP for making this login form. First, create a PHP file name as index.php and write down this code.

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">;
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>Ajax PHP Login</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">;
<link rel="stylesheet" type="text/css" href="/styles/styles.css" media="all,print"/>
<link rel="stylesheet" type="text/css" href="asset/styles.css" media="all,print"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="asset/events.js"></script>
<meta name="keywords" content="Ajax PHP Login"/>
<meta name="description" content="Ajax PHP Login"/>
<div class="container content text-center">
echo '<h2 class="text-center">Welcome, '.$_SESSION['email'].'</h2>';
<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">
<div class="panel panel-info">
<div class="panel-heading">
<div class="panel-title">PHPAns Ajax PHP Login </div>

<div style="padding-top:30px" class="panel-body" >

<div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>

<form class="form-horizontal">

<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
<input id="login-username" type="text" class="form-control" name="username" value="" placeholder="Username or Email" autofocus>

<div style="margin-bottom: 25px" class="input-group">
<span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
<input id="login-password" type="password" class="form-control" name="password" placeholder="Password">

<div class="input-group">
<div class="checkbox">
<input id="login-remember" type="checkbox" name="remember" value="1" checked> Remember me

<div style="margin-top:10px" class="form-group">
<!-- Button -->

<div class="col-sm-12 controls">
<button id="btn-login" class="btn btn-block btn-social btn-bitbucket"> <span class="fa fa-sign-in"></span> Login</button>

<a class="btn btn-block btn-social btn-twitter" href="#" onclick="location.href = "/twitter-login/process.php""><span class="fa fa-twitter"></span> Sign in with Twitter</a>

<a class="btn btn-block btn-social btn-facebook" href="#" onclick="location.href = "/facebook-login/process.php""><span class="fa fa-facebook"></span> Sign in with Facebook</a>


<div class="form-group">
<div class="col-md-12 control">
<div style="border-top: 1px solid#888; padding-top:15px; font-size:85%" >
Don't have an account!
<a href="#">
Sign Up Here
Forgot password?
<a href="#">
Reset It Now
After createing this file successfully we need to create a jQuery file and stylesheet that we have already linked on this file. Let's create this jQuery event for Ajax PHP Login. We have included events.js in our index.php file now we are going to create events.js file. First create a directory name as asset then create a .jS file into this directory name as events.js 

$(document).ready(function() {
$("#btn-login").click(function() {
var e = $("#login-username").val(),
a = $("#login-password").val(),
t = ($("#login-remember").val(), "action=login&email=" + e + "&password=" + a + "&remember=" + t);
return $.trim(e).length > 0 && $.trim(a).length > 0 ? $.ajax({
type: "POST",
url: "action.php",
data: t,
cache: !1,
beforeSend: function() {
$("#btn-login").attr("disabled", !0), $("#btn-login").html("<i class='fa fa-sign-in'></i> Loading..."), $("#login-alert").removeClass(), $("#login-alert").css("display", "block"), $("#login-alert").css("text-align", "center"), $("#login-alert").html('<img src="/icon/squares.gif" alt="loading...">')
success: function(e) {
e ? "true" == e ? ($("#btn-login").html("<i class='fa fa-sign-in'></i> Logging..."), $("#login-alert").removeClass(), $("#login-alert").addClass("alert alert-success"), $("#login-alert").html('You have successfully logged in.<br/><i class="fa fa-spinner fa-spin fa-2x"></i>'), $("#login-alert").css("display", "block"), setTimeout(function() {
}, 3e3), $("#btn-login").attr("disabled", !0), $("#login-username").attr("disabled", !0), $("#login-password").attr("disabled", !0), $("#login-alert").addClass("alert"), $("#login-alert").addClass("alert-warning"), $("#login-remember").attr("disabled", !0)) : ($("#login-alert").addClass("alert alert-warning"), $("#login-alert").html("<i class='fa fa-exclamation-triangle' aria-hidden='true'></i> Username/Email &amp; Password Incorrect."), $("#btn-login").attr("disabled", !1), $("#btn-login").html("<i class='fa fa-sign-in'></i> Login"), $("#btn-login").attr("disabled", !1)) : ($("#btn-login").html("<i class='fa fa-sign-in'></i> Login"), $("#login-alert").html("<i class='icon-warning-sign'></i> There is an SQL error!"), $("#btn-login").attr("disabled", !1))
}) : ($("#login-alert").html("<i class='fa fa-exclamation-triangle' aria-hidden='true'></i> Username/Email &amp; Password required!"), $("#login-alert").show('fast')), !1
We have added jQuery and Ajax evnts on this file. We have done ajax call in action.php file to do some login actions. Now we need to create action.php file, create action.php file and write your login functions.

if(isSet($_POST['email']) && isSet($_POST['password']) && $_POST['action']=='login')
$email=trim($_POST['email']); // Username Or Email
$remember= $_POST['remember'];
// You can check user from database
if ($email=='phpans'&&$password=='0f0ec37507f51f92d697f15fd17a698e'){$count=1;}else{$count=0;}
$_SESSION['email']= $email;
print 'true';
print 'false';

We have added a PHP functions for login. You can check and validate users by using MySQL but here I used a dummy login. You can added or eidt this file actions as you wish. We also added styles.css file for styling you can change it and add your own stylesheet, I have used styles from this site CSS.
Our full project is ready to display result. Run this script into your server and check it. If you add all files correctly then Ajax Login Form will work properly.

Here is a live demo of this project you can see this demo. Use Username: phpans and Password: phpans in demo version. Even PHPAns are currently using this Ajax PHP project for Login to PHPAns. So, you can use this without any doubt make your website more attractive and present to your users.

I hope you enjoy this project and this project will be helpful for you. And you can use this to increase site performance. I have added this file into attachment you can download full Ajax PHP Login project from here and you can use it instantly. In next project we will complete Ajax PHP Signup project. If you have any question or comment about this Ajax Login Form Using jQuery and PHP project please don't hesitate to do that, please comment your question in comment section.

Download Source Code
Unlock source code with a social share.

Did you like this article? it will be appreciated if you share a coffee or burger with the author

Sent $5 to the author
Sent $10 to the author

Need Assistance?

I'm Sajjad Hossain, working on web application development since 2012. Do you need assistance on your project? or are you stuck with problems? I am available to help you.
If you want to contact with me ping me at -


We use cookies on our website. To find out more about how and why they are used or opt-out, please read our Cookie Policy. By choosing "I Accept", you consent to our use of cookies. Cookie Policy