Live Username Availability Check using AJAX JQuery and PHP

Hi Friends in this php ajax and jQuery Script we are going to learn how to implement Live Username Availability Check using AJAX JQuery and PHP with white space not allowed system..
Just Follow the below ajax example..
Files Structure:

Live Username Availability Check using AJAX JQuery and PHP

Copy the below codes:
1. index.html

<html>
<head>
<title>check username availability using ajax</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<div id="content">
<h2>AJAX Live Username Availablity</h2>
  <span>UserName:</span><br/>
<input type="text" name="username" id="username" autocomplete="off"/><br/>
<div id="success"></div>
</div>
</html>

2. check.php

<?php
    $conn=new mysqli('localhost','root','','test');
    $username=mysqli_real_escape_string($conn,$_POST['username']);
 $count=strlen($username);
 if(empty($_POST['username'])){
  echo "Enter a Username";
 }else{
  if($count<5){
   echo "Your username is Too short";
 }else{
 $result=mysqli_query($conn,"SELECT*FROM user WHERE username='$username'");
 $count=$result->num_rows;
 if($count==0){
  echo "Congratulations <font style=color:green size=5;>$username </font> is available...";
 }else{
   
 echo "<font style=color:red size=5;>$username</font> is Not available..."; 
 }
 }
 }
?>

3. script.js

$(document).ready(function(){
 $("#username").keyup(function(){
  var username=$("#username").val();
        var re =  /\s/g;
   if(re.test(username)){
   $("#success").html('<b><font style=color:red>White Space Not Allowed<color></b>');
   return false;
   }else{
   $.ajax({
    url:"check.php",
    type:"POST",
    data:{username:username},
    success: function(data){
     $("#success").html(data);
    }
   });
  }  
  return false; 
 });

});

4. style.css

#content{
 width:350px;
 height:200px;
 background:white;
 margin:auto;
 box-shadow:4PX 2PX 4PX 4px;
}
span{
 font-size:20px;
 color:#595959;
 text-decoration:underline;
}
input[type=text]{
 width:250px;
 border-radius:5px;
 border:1px solid green;
 padding:10px;
}

That's it Friends How to Live Username Availability Check using AJAX JQuery and PHP with White Space Not Allowed..
Stay with os for more codes..Thank you..
also learn..
1. PHP AJAX Live Search
2. PHP AJAX Simple Login Form
3. AJAX Auto Suggest Using PHP ,MySQL
4. PHP AJAX Insert Data Into MySQL Database Without Refresh The page

Latest

Saturday, February 17, 2018

Live Username Availability Check using AJAX JQuery and PHP