Username live availability Check using php and Ajax | 2my4edge

05 July 2013

Username live availability Check using php and Ajax

Username live availability is one of the most important thing the database field, why because mostly we have to different kind of username and unique name for all users. then only we can identify the individual user, so for here we are going to check the database field for already existing username availability. so here we are using php fetch coding and AJAX live check without refreshing of the page.
live-user-name-check

DOWNLOAD        LIVE DEMO

DATABASE

<?php
$conn = mysql_connect("localhost","root","") or die("Database not connected");
$db=mysql_select_db("2my4edgedatabase", $conn) or die("Database not connected");
?>

database name is --> 2my4edgedatabase
table name is --> usernames

Check Database coding

<?php
include('db.php');
if(isset($_POST['username']))
{
$username = $_POST['username'];
$sql = mysql_query("select id from usernames where username='$username'");
if(mysql_num_rows($sql))
{
echo '<STRONG>'.$username.'</STRONG> is already in use.';
}
else
{
echo 'OK';
}
}
?>

AJAX

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<SCRIPT type="text/javascript">
$(document).ready(function()
{
$("#username").change(function() 
{ 
var username = $("#username").val();
var msgbox = $("#status");

if(username.length > 4)
{
$("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking availability...');

$.ajax({  
    type: "POST",  
    url: "ajax.php",  
    data: "username="+ username,  
    success: function(msg){  
   $("#status").ajaxComplete(function(event, request){ 
    if(msg == 'OK')
    { 
    
        $("#username").removeClass("red");
        $("#username").addClass("green");
        msgbox.html('<img src="available.png" align="absmiddle">');
    }  
    else  
    {  
         $("#username").removeClass("green");
         $("#username").addClass("red");
        msgbox.html(msg);
    }  
   
   });
   } 
   
  }); 

}
else
{
$("#username").addClass("red");
$("#status").html('<font color="#cc0000">Please nter atleast 5 letters</font>');
}
return false;
});

});
</SCRIPT>

index page

<input type="text" name="username" id="username" style="margin-top:35px;" />&nbsp; &nbsp;
<span id="status"></span>

span id="status" is for show the result of the output.
that's it. for live availability check username using php, mysql, and Ajax. enjoy with demo.


RELATED POSTS:








14 comments:

  1. Amazing easily learning tutorial...

    ReplyDelete
  2. Sorry I am not getting the right output where is the msg that is sent to the function is defined

    ReplyDelete
  3. Not working

    ReplyDelete
  4. but if we want to check the availability of two fields separately .keyup() then how to do that ?

    ReplyDelete
  5. Username live availability Check using php and Ajax AND JQUERY !

    ReplyDelete
  6. WHERE in your code are you calling the AJAX ?????

    ReplyDelete
  7. This is only half solution. there are 2 problems, 1. checking username availability 2. NOT submitting form if username is NOT available. we are using 2 functions, 1. for checking username availability using $("#username").change(function()
    { }); 2. submitting form after validation using $("#submitForm").click(function(){ });
    How to combine these 2 functions to achieve desired result (NOT submitting form if username is NOT available) ???

    ReplyDelete
  8. There is also a nice tutorial on username and email availability using Ajax on www.talkerscode.com

    http://talkerscode.com/webtricks/check%20username%20and%20email%20availability%20from%20database%20using%20ajax.php

    ReplyDelete
  9. Nice and well explained tutorial there are more good tutorial one of them i found on www.talkerscode.com.based on how to check username and email availability and it is deeply explained http://talkerscode.com/webtricks/check%20username%20and%20email%20availability%20from%20database%20using%20ajax.php

    ReplyDelete
  10. thanks for the great tutorial

    ReplyDelete
  11. Good nice working boy..
    have more blessings ..

    ReplyDelete
  12. this does not work with latest version of jquery 3.2.1 can you update it?

    ReplyDelete

^