Check Availability username with jquery-ajax, php mysql
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check Availability username with jquery-ajax, php mysql</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<style type="text/css">
body
{
font-family:Arial, Helvetica, sans-serif
}
#status
{
font-size:11px;
margin-left:10px;
}
.green
{
background-color:#CEFFCE;
}
.red
{
background-color:#FFD9D9;
}
input
{
font-size:16px;
width:190px;
height:25px;
border:solid 1px #333333;
padding:4px;
}
</style>
<SCRIPT type="text/javascript">
$(document).ready(function()
{
$("#username").change(function()
{
var username = $("#username").val();
var msgbox = $("#status");
if(username.length > 3) {
$("#status").html('<img src="img/loader.gif" align="absmiddle"> <b>Checking...</b>');
$.ajax({
type: "POST",
url: "check.php",
data: "username="+ username,
success: function(msg){
if(msg == 'OK')
{
$("#username").removeClass("red");
$("#username").addClass("green");
msgbox.html('<img src="img/yes.png" align="absmiddle"> <font color="Green"> Available </font> ');
}
else
{
$("#username").removeClass("green");
$("#username").addClass("red");
msgbox.html(msg);
}
}
});
}else{
$("#username").addClass("red");
$("#status").html('<font color="#cc0000">Enter valid User Name</font>');
}
return false;
});
});
</SCRIPT>
</head>
<body>
<div>
<input type="text" name="username" id="username" /><span id="status"></span>
</div>
</body>
</html>
//check.php
<?php
$host = "localhost";
$username_ = "root";
$password = "";
$databasename = "testingdb";
$connect = mysql_connect($host, $username_, $password) or die("Opps some thing went wrong");
mysql_select_db($databasename, $connect) or die("Opps some thing went wrong");
if(isSet($_POST['username']))
{
$username = $_POST['username'];
$username = mysql_real_escape_string($username);
$sql_check = mysql_query("SELECT * FROM users WHERE username='$username'") or die('Invalid query: ' . mysql_error());;
if(mysql_num_rows($sql_check))
{
echo '<font color="#cc0000"><STRONG>'.$username.'</STRONG> is already in use.</font>';
}
else
{
echo 'OK';
}
}
?>
VIDEO
Check Availability username with jquery-ajax, php mysql
