✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

Ajax Login Form Using jQuery, PHP And MySQL

Last Updated : Jul 1, 2023

IN - jQuery Ajax PHP MySQL | Written & Updated By - Dikshita

In this tutorial we will show you how to create ajax login form using jQuery, PHP and MySQL, Ajax login form is used when you have to submit form and do login without page refresh to avoid user redirection and also for saving time and you can also use ajax login form in popup box.

You may also like ajax contact form using PHP and MySQL.

Ajax Login Form Using jQuery, PHP And MySQL

CHECK OUT THIS TUTORIAL LIVE DEMO →

To Create Ajax Login Form It Takes Only Four Steps:-

  1. Make a HTML file and define markup and scripting
  2. Make a PHP file for login
  3. Make a PHP file for main page and logout
  4. Make a CSS file and define styling

Step 1. Make a HTML file and define markup and scripting

We make a HTML file and save it with a name login.html 

<html>
<head>
<link href="login_style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function do_login()
{
 var email=$("#emailid").val();
 var pass=$("#password").val();
 if(email!="" && pass!="")
 {
  $("#loading_spinner").css({"display":"block"});
  $.ajax
  ({
  type:'post',
  url:'do_login.php',
  data:{
   do_login:"do_login",
   email:email,
   password:pass
  },
  success:function(response) {
  if(response=="success")
  {
    window.location.href="index.php";
  }
  else
  {
    $("#loading_spinner").css({"display":"none"});
    alert("Wrong Details");
  }
  }
  });
 }

 else
 {
  alert("Please Fill All The Details");
 }

 return false;
}
</script>
</head>
<body>
<div id="wrapper">

<div id="login_form">
 <h1>LOGIN FORM</h1>
 <p id="login_label">Email : demo@demo.com | Password : demo</p>
 <form method="post" action="do_login.php" onsubmit="return do_login();">
  <input type="text" name="emailid" id="emailid" placeholder="Enter Email">
  <br>
  <input type="password" name="password" id="password" placeholder="***********">
  <br>
  <input type="submit" name="login" value="DO LOGIN" id="login_button">
 </form>
 <p id="loading_spinner"><img src="images/loader.gif"></p>
</div>

</div>
</body>
</html>

In this step we create a login for user to do login and create a function do_login() to do login without page refresh.

In do_login() function we get user email id and password then create an ajax request and send the data to do_login.php file and if user successfully logged in we redirect user to index.php page.

If you want to make your login form more secure view our validate email and password using jQuery tutorial.

Step 2. Make a PHP file for login

We make a PHP file and save it with a name do_login.php 

// Database Structure 
CREATE TABLE 'user' (
 'email' text NOT NULL,
 'password' text NOT NULL,
) ENGINE=MyISAM AUTO_INCREMENT=5 DEFAULT CHARSET=latin1

<?php
session_start();
if(isset($_POST['do_login']))
{
 $host="localhost";
 $username="root";
 $password="";
 $databasename="sample";
 $connect=mysql_connect($host,$username,$password);
 $db=mysql_select_db($databasename);

 $email=$_POST['email'];
 $pass=$_POST['password'];
 $select_data=mysql_query("select * from user where email='$email' and password='$pass'");
 if($row=mysql_fetch_array($select_data))
 {
  $_SESSION['email']=$row['email'];
  echo "success";
 }
 else
 {
  echo "fail";
 }
 exit();
}
?>

In this step we create a database called 'user' and then get user email id and password and check if these details are present in our database table if details are present we insert email id in session variable otherwise we display fail.

You may also like login form with limited login attempts using JavaScript.

Step 3. Make a PHP file for main page and logout

We make a PHP file and save it with a name index.php 

<?php
session_start();
if(isset($_POST['logout']))
{
 unset($_SESSION['email']);
}
?>

<html>
<body>
 <h2>Hi, Demo</h2>
 <form method='post'>
  <input type='submit' name='logout' value='Logout'>
 </form>
</body>
</html>

In this step we create a logout form to do logout by simply using unset() function. You may also like login form with shake animation effect.

Step 4. Make a CSS file and define styling

We make a CSS file and save it with a name login_style.css 

body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#819FF7;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper h1
{
 margin-top:50px;
 font-size:45px;
 color:#0B2161;
}
#wrapper h1 a
{
 color:#0B2161;
 font-size:18px;
}
#wrapper h2 input[type="submit"]
{
 background:none;
 border:none;
 text-decoration:underline;
 font-size:17px;
}
#login_form
{
 background-color:white;
 width:350px;
 padding:20px;
 box-sizing:border-box;
 margin-left:320px;
 box-shadow:0px 0px 10px 0px #2E64FE;
}
#login_form h1
{
 text-align:center;
 margin:0px;
 color:#0B2161;
 font-size:27px;
 margin-bottom:20px;
}
#login_form #login_label
{
 color:#0B2161;
}
#login_form input[type="text"],input[type="password"]
{
 width:250px;
 height:40px;
 padding-left:5px;
 margin:5px;
 border-radius:2px;
 border:1px solid #2E64FE;
}
#login_form input[type="submit"]
{
 background-color:#2E64FE;
 color:white;
 border:none;
 border-bottom:3px solid #0040FF;
 width:250px;
 height:45px;
 border-radius:2px;
 margin-left:-4px;
 margin-top:5px;
}
#login_form #loading_spinner
{
 display:none;
}

That's all, this is how to create ajax login form using jQuery, PHP and MySQL. You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

I hope this tutorial on ajax login form helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →