Monday, 20 July 2015

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.

Auto suggest username like gmail using php with ajax



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;
    }
?>

0 comments:

Post a Comment