Auto suggest username like gmail using php with ajax

While registration time user registering their username in the username column, that time the same user name already exist in the database, for that we are creating auto generation of username like gmail and all. like that we are suggesting some username for users. Take a look at live demo.

Live demo Download

Database

CREATE TABLE IF NOT EXISTS `users` (
`id` int(11) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(200) NOT NULL
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;

Html and Ajax

$(document).on('change','#username',function(){} - #username input id value post ajax.php page.if username already exist in database php function while to create new username not exist username get this $("#suggestname") element.

<html>
    <body>
        <form>
        <label>Username</label>
        <input type="text" name="username"  id="username"  />
        <span id="status"></span>
        <div id="suggestname"></div>
        </form>
    </html>
</body>

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
 $(document).on('change','#username',function(){

    var username = $("#username").val();
    if(username.length >3) {
    var url = "ajax.php";
    $("#status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking.'); 
        $.ajax({
          type: "POST",
          url : url,
          data: $("#username").serialize(),
          success: function(msg)
           {
             if(msg == 'OK')
                {               
                    $("#suggestname").hide();
                    $("#status").html('Avalible');
                }  
                else  
                {  
                     $("#status").html('Already exist.');
                     $("#suggestname").html('Availble : <a href="">'+msg+'</a>');
                    
                }   
           }
       });

      else
       {
            $("#status").html('Please enter more then 4 letters');
       }          
    return false;
    });
</script>

Ajax.php

$db - Mysqli database connection.

check_user - function create random value along with username. it will while check again new username exist or not to the database.

mysqli_num_rows - checking row exist or not.

<?php 
$db = new mysqli('localhost', 'root', '', '1next2');
if(isset($_POST['username'])):
    extract($_POST);

    $username=mysqli_real_escape_string($db,$username);
    $sql = $db->query("select id from users where username='$username'");
    if(mysqli_num_rows($sql))
    {
        $user = preg_replace('/([^@]*).*/', '$1',$username);
        echo $uuser =check_user($user,$db);
    }
  else
    {
        echo 'OK';
    }
 endif;

function check_user($user,$db)
    {
        $sql = $db->query("select id from users where username='$user'");   
        if(mysqli_num_rows($sql))
        {
            echo $uuser = $user.rand ( 1 , 99 );
            check_user($uuser,$db);
        }
        else return $user;
    }
?>

I hope you are really like this post .if have you any suggestion comment below. for more updates subscribe to our website. Thank for your visiting keep in touch with us

4 comments:

Anonymous22 November 2015 at 00:13
It does not seem to work with IDs? Tried username which seems to work fine but when I tried using with ID it got stuck on checking availability.
Unknown9 August 2016 at 09:15
roseangelhira@gmail.com
Unknown3 March 2019 at 19:55
This comment has been removed by a blog administrator.
mikethomson15 May 2021 at 03:10
This comment has been removed by a blog administrator.

Menu Link

04 February, 2015