Pages

Login In Jquery PHP - MYSQL




 Jquery

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#submit").click(function() {
var username = $("#username").val();
var password = $("#password").val();
if(username=='' || password=='' ){
alert("Please enter the username and password");
}
else {
$.ajax({
type: "POST",
url: "login.php",
data: "username="+ username + "&password=" + password ,

beforeSend: function()
{
$('#display').html('Loading....');
},
success: function(response)
{
$("#display").fadeIn(2000).html(response);

document.getElementById('username').value='';
document.getElementById('password').value='';

}
});
}
return false;
});

});
</script>


CSS

<style type="text/css">
body{width:100%;font-family:"Trebuchet MS";margin:0;padding:0; }
h2 a{text-decoration:none;}
#warp{width:300px;margin:0 auto;margin-top:30px;}
.login{border:1px solid #CCC;float:left;width:300px;}
#display{display:none;border-radius:3px;margin-bottom:4px;}
#sucess{padding:5px 0;color:#999;text-align:center;background:#BEFF7D;width:300px;}
#error{padding:5px 0;color:#FFF;text-align:center;background:#FF5353;width:300px;}
#close{color:#999;margin-right:6px;text-decoration:none;}
</style>


HTML

<div id="warp">
<div id="display"><a href="javascript:void(0)" id="close">x</a></div>
<div class="login">
<h3 align="center">Login</h3>
<div style="border-bottom:1px solid #CCC;"></div>

<form method="post" name="form" action="">
<p align="center">Username&nbsp; <input name="username" type="text" id="username" /></p>
<p align="center">Password&nbsp; <input name="password" type="password" id="password" /></p>
<p align="center"><input type="submit" name="submit" value="submit" id="submit" /></p>
</form>
</div>
</div>


login.php

<?php
$db = mysql_connect('localhost','root','') or die ("Unable to connect to Database Server.");
mysql_select_db ('demo', $db) or die ("Could not select database.");

if(isset($_POST['username']))
{
$username=$_POST['username'];
$password=$_POST['password'];
$query = mysql_query("select * from login where username='$username' and password='$password' ")or die(mysql_error());
$data = mysql_fetch_row($query);
if($data){
echo '<div id="sucess">sucess</div>';}
else {
echo '<div id="error">Invaild User</div>';}

}?>