AJAX User Name Availability
Step 1: Database configuration and its connection settings (connect.php)
Step 1: Database configuration and its connection settings (connect.php)
<?php$db="pwd_strength";$hostname = "localhost";$user = "root";$password = "";$con = mysql_connect($hostname, $user, $password) or die("Could not connect <span class="IL_AD" id="IL_AD11">database</span>");mysql_select_db($database, $con) or die("Could not select database");?>
Step 2: Application Landing Page (index.php)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="<span class="IL_AD" id="IL_AD12">stylesheet</span>" type="text/css" href="css/style.css" />
</head>
<body>
<div id="container">
<div id="wrapper">
<div id="top"> Live Username Availability Checker </div>
<div id="form">
<label>Username</label>
<<span class="IL_AD" id="IL_AD6">input type</span>="text" autocomplete="off" name="user_name" id="user_id" class="user_name" />
<span class="check" ></span>
</div>
</div>
</div>
<!-- js placed at bottom to make page load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('.user_name').keyup(function()
{
var checkname=$(this).val();
var availname=remove_whitespaces(checkname);
if(availname!=''){
$('.check').show();
$('.check').fadeIn(400).html('<img src="images/ajax-loading.gif" /> ');
var String = 'username='+ availname;
$.ajax({
type: "POST",
url: "username-check.php",
data: String,
<span class="IL_AD" id="IL_AD9">cache</span>: false,
success: function(result){
var result=remove_whitespaces(result);
if(result==''){
$('.check').html('<img src="images/accept.png" /> This Username Is Avaliable');
$(".check").removeClass("red");
$('.check').addClass("green");
$(".user_name").removeClass("yellow");
$(".user_name").addClass("white");
}else{
$('.check').html('<img src="images/error.png" /> This Username Is Already Taken');
$(".check").removeClass("green");
$('.check').addClass("red")
$(".user_name").removeClass("white");
$(".user_name").addClass("yellow");
}
}
});
}else{
$('.check').html('');
}
});
});
function remove_whitespaces(str){
var str=str.replace(/^\s+|\s+$/,'');
return str;
}
</script>
</body>
</html>
Step 3: The code behind for checking username availability (username-check.php)
<?php
require 'connect.php';
if(isset($_POST['username']) && !empty($_POST['username'])){
$username=strtolower(mysql_real_escape_string($_POST['username']));
$query="select * from registration where LOWER(username)='$username'";
$res=mysql_query($query);
$count=mysql_num_rows($res);
$HTML='';
if($count > 0){
$HTML='user exists';
}else{
$HTML='';
}
echo $HTML;
}
?>
CSS Code Here
body {
padding: 50px;
}
h1 a {
color: #000;
}
input {
font-size:12px;
padding:4px 2px;
border:<span class="IL_AD" id="IL_AD8">solid</span> 1px #aacfe4;
width:200px;
margin:0 5px;
}
label {display:block;
font-weight:bold;
text-align:right;
width: 200px;
float:left;
}
#top{
margin-left: 75px;
font-weight: bold;
font-size:24px;
color: blue;
padding: 10px;
}
#wrapper{
border:solid 2px #b7ddf2;
background:#ebf4fb;
width: 700px;
margin: auto;
padding:20px;
min-height:180px;
}
#form{margin-top: 10%;
margin-left: auto;}
#bottom{
margin-left: 450px;
font-size: 24px;
}
.yellow{background-color:yellow;}
.white{background-color:#FFF;}
.green{color:green;}
.red{color:red;}
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন