This is Login In Jquery Ajax PHP. data: "username="+ username + "&password=" + password , is used to pass the username and password to login.php and get result $("#display").fadeIn(2000).html(response);
Jquery
CSS
HTML
login.php
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>
<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>
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 <input name="username" type="text" id="username" /></p>
<p align="center">Password <input name="password" type="password" id="password" /></p>
<p align="center"><input type="submit" name="submit" value="submit" id="submit" /></p>
</form>
</div>
</div>
<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 <input name="username" type="text" id="username" /></p>
<p align="center">Password <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>';}
}?>
$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>';}
}?>
No comments:
Post a Comment