login form ajax code example

Example 1: php ajax login form using jquery

<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>

Example 2: submitting login and sign up forms using AJAX

<?php

session_start();

  // check whether the loginbtn was clicked
if (isset($_POST['loginbtn'])) {

  include_once 'dbh.inc.php';

    // initialize variable
  $uid = trim($_POST['uid']);
  $pwd = trim($_POST['pwd']);

    // error handlers

    // check if inputs are empty
  if (empty($uid) || empty($pwd)) {

    $conn = null;
    header("Location: ../index.php?login=error_field");
    exit();

  } else {

      // check if username is in database
    $stmt = $conn->prepare("SELECT user_uid FROM users WHERE user_uid = ?");
    $stmt->execute([$uid]);

    if ($stmt->rowCount() < 1) {

      $conn = null;
      header("Location: ../index.php?login=error_username");
      exit();

    } else {

        // check if password is correct
      $stmt = $conn->prepare("SELECT user_pwd FROM users WHERE user_uid = ?");
      $stmt->execute([$uid]);
      $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

        // dehashing the password
      $hashedPwdCheck = password_verify($pwd, $result[0]['user_pwd']);

      if ($hashedPwdCheck == false) {

        $conn = null;
        header("Location: ../index.php?login=error_password");
        exit();

      } else {

          // login the user in
        $stmt = $conn->prepare("SELECT user_id, user_first, user_last, user_email, user_uid FROM users WHERE user_uid = ?");
        $stmt->execute([$uid]);
        $result = $stmt->fetchAll(PDO::FETCH_ASSOC);

        $_SESSION['user_id'] = $result[0]['user_id'];
        $_SESSION['user_first'] = $result[0]['user_first'];
        $_SESSION['user_last'] = $result[0]['user_last'];
        $_SESSION['user_email'] = $result[0]['user_email'];
        $_SESSION['user_uid'] = $result[0]['user_uid'];

        $conn = null;
        header("Location: ../updates.php?login=success");
        exit();

      }

    }

  }

} else {

  header("Location: ../index.php?login=error");
  exit();

}

?>

Tags:

Javascript Example

Recent Posts