Ajax Login form with jQuery and PHP

 index.php

<div class="loginform-in">
<h1>User Login</h1>
<div class="err" id="add_err"></div>
<fieldset>
    <form action="./" method="post">
        <ul>
            <li> <label for="name">Username </label>
            <input type="text" size="30"  name="name" id="name"  /></li>
            <li> <label for="name">Password</label>
            <input type="password" size="30"  name="word" id="word"  /></li>
            <li> <label></label>
            <input type="submit" id="login" name="login" value="Login" class="loginbutton" ></li>
        </ul>
         </form>   
</fieldset>
</div>

Login.php 

 

require_once 'config.php';

session_start();
$uName = $_POST['name'];
$pWord = md5($_POST['pwd']);
$qry = "SELECT usrid, username, oauth FROM usermeta WHERE username='".$uName."' AND pass='".$pWord."' AND status='active'";
$res = mysql_query($qry);
$num_row = mysql_num_rows($res);
$row=mysql_fetch_assoc($res);
if( $num_row == 1 ) {
    echo 'true';
    $_SESSION['uName'] = $row['username'];
    $_SESSION['oId'] = $row['orgid'];
    $_SESSION['auth'] = $row['oauth'];
    }
else {
    echo 'false';
} 

Login.Ajax

$(document).ready(function(){
    $("#add_err").css('display', 'none', 'important');
     $("#login").click(function(){   
          username=$("#name").val();
          password=$("#word").val();
          $.ajax({
           type: "POST",
           url: "login.php",
            data: "name="+username+"&pwd="+password,
           success: function(html){   
            if(html=='true')    {
             //$("#add_err").html("right username or password");
             window.location="dashboard.php";
            }
            else    {
            $("#add_err").css('display', 'inline', 'important');
             $("#add_err").html("<img src='images/alert.png' />Wrong username or password");
            }
           },
           beforeSend:function()
           {
            $("#add_err").css('display', 'inline', 'important');
            $("#add_err").html("<img src='images/ajax-loader.gif' /> Loading...")
           }
          });
        return false;
    });
});

 

CSS

.loginform-in {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D6E5F5;
    border-radius: 3px 3px 3px 3px;
    height: 345px;
    margin: auto;
    padding: 0;
    width: 460px;
}

.loginform-in fieldset {
    border-bottom: 1px solid #EFEFEF;
    margin: 20px auto;
    padding: 0 0 10px;
    width: 87%;
}

.loginbutton {
    background: -moz-linear-gradient(center top , #F1F1F1, #E0E0E0) repeat scroll 0 0 transparent;
    border: 1px solid #A7A7A7;
    border-radius: 3px 3px 3px 3px;
    color: #444444;
    cursor: pointer;
    font-family: "Helvetica Neue";
    font-size: 13px;
    font-weight: normal;
    height: 29px;
    letter-spacing: 1px;
    width: 92px;
}

.loginform-in fieldset label {
    color: #7D7D7D;
    float: left;
    font-family: "Helvetica Neue";
    font-size: 14px;
    font-weight: bold;
    padding: 8px 0 0;
    width: 140px;
}

.loginform-in fieldset input[type="text"], input[type="password"], fieldset select {
    border: 1px solid #CBC7C5;
    border-radius: 3px 3px 3px 3px;
    float: left;
    height: 33px;
    padding: 1px 1px 1px 3px;
    width: 250px;
}