Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

Auto Suggestion of User Name and Email Id on User Registration Using jQuery,Ajax And PHP.

Tuesday, Apr 4, 2017

Tags:- Ajax jQuery PHP MySQL


Auto Suggestion is a very usefull and important technique to help the user to do registration or signup when thier desired User Name or Email Id is already exist. In this tutorial we will create a auto suggestion technique for user registration that is applicable for both User Name and User Email Address.You may also like generate random username using PHP and jQuery.


See Demo
Auto Suggestion


To create a Auto Suggestion of User name and Email Id it takes only four steps:-

  1. Make a HTML file and define markup and script for user registration
  2. Make a CSS file and define styling for user registration
  3. Connect to the database and check user name and email id of user
  4. Connect to the database and do user registration


Step 1.Make A HTML file and define markup and script for user registration

We make a HTML file and save it with a name registration.html

<html>
<head>
<link rel="stylesheet" type="text/css" href="registration_style.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#uname").blur(function(){
  name_check();
 });
 $("#umail").blur(function(){
  mail_check();
 });
});

function name_check()
{
 var val=document.getElementById("uname").value;
 if(val)
 {
  $.ajax({
  type: 'post',
  url: 'check.php',
  data: {
   checkname:val
  },
  success: function (response) {
  if(response==val)
  {
   document.getElementById("name_status").innerHTML="OK";
  }
  else
  {
   document.getElementById("name_status").innerHTML="Username already Exist try this "+response;
  }
  }
  });
 }
}

function mail_check()
{
 var val=document.getElementById("umail").value;
 if(val && val.indexOf("@")!=-1)
 {
  $.ajax({
  type: 'post',
  url: 'check.php',
  data: {
   checkmail:val
  },
  success: function (response) {
  if(response==val)
  {
   document.getElementById("mail_status").innerHTML="OK";
  }
  else
  {
   document.getElementById("mail_status").innerHTML="Mail Id already Exist try this "+response;
  }
  }
  });
 }
}

function checkform()
{
 var name_val=document.getElementById("name_status").innerHTML;
 var mail_val=document.getElementById("mail_status").innerHTML;
   
 if((name_val && mail_val)=="OK")
 {
  return true;
 }
 else
 {
  return false;
 }
}
</script>

</head>
<body>

<center>
 <p id="heading">Auto Suggestion of User Name and Email Id Using Ajax,jQuery and PHP</p>
 <div id="registration_box">
  <form method='post' action="registration.php" onsubmit="return checkform();">
   <input type="text" name="uname" id="uname" placeholder="User Name">
   <br>
   <span id="name_status"></span>
   <input type="text" name="umail" id="umail" placeholder="Email Address">
   <br>
   <span id="mail_status"></span>
   <input type="password" name="upass" id="upass" placeholder="*******"><br>
   <input type="submit" name="do_registration" id="submit" value="Register">
  </form>
 </div>
</center>

</body>
</html>

In this step we make a simple form to do user registration.But before we do user registrarion we made three function 1.name_check() function is used to check the user name whether the user name is already exist or not if by sending ajax request to check.php file and if the user name is a already exist it suggest some other user name and if the user name is not exist it display OK.2.mail_check() function is same as name_check() function but in place of user name it check user email id 3.checkform() function is used to check the form on registration if both the name_status and mail_status innerHTML is OK the it submit the form.You may also like validate email id and password using jQuery.



Step 2.Make a CSS file and define styling for user_registration

We make a CSS file and save it with name registration_style.css.

body
{
 background-color:#E6E6E6;
 font-family:helvetica;
}
#heading
{
 margin-top:100px;
 width:600px;
 font-size:27px;
 color:#2E2EFE;
}
#registration_box
{
 width:350px;
 border:1px solid grey;
 padding:20px;
 background-color:#BDBDBD;
 box-shadow:0px 0px 10px 0px #585858;
}
#uname,#umail,#upass
{
 width:200px;
 height:40px;
 padding:5px;
 font-size:18px;
 margin-top:10px;
 background-color:#D8D8D8;
 border:1px solid #A4A4A4;
 border-radius:3px;
}
span
{
 color:#F78181;
 font-size:17px;
}
#submit
{
 width:200px;
 height:40px;
 font-size:18px;
 margin-top:10px;
 background-color:#A4A4A4;
 border-radius:3px;
 border:none;
 margin-top:10px;
 color:white;
}


Step 3.Connect to the database and check user name and email id of user

We make a PHP file save it with a name check.php which is used to connect and check user name and email id of user whether the user name and email id is already exist or not and it send back the data to registration.html file on ajax request.You may also like verify user through email using PHP.

<?php
// It gets the user name and insert some random number and send the modified user name to check_user_name function
function suggest_name($data)
{
 $new_data = $data.mt_rand(0,10000);
 check_user_name($new_data);
}

// It checks the user name if the it already exist the we send the name to suggest_name function
function check_user_name($variable)
{
 $select = mysql_query("select * from members where name='$variable'");

 if(mysql_num_rows($select))
 {
  suggest_name($variable);
 }
 else
 {
  echo $variable;
 }
}

// It gets the value send by ajax request and then it pass the value to check_user_name function  
if(isset($_POST['checkname']))
{
 $term = $_POST['checkname'];
 mysql_connect('localhost','root','');
 mysql_select_db('demo');
 check_user_name($term);
 exit();
}

// It gets the email and insert some random number and send the modified emailid to check_user_mail function
function suggest_mail($data)
{
 $new_data = str_replace("@",mt_rand(0,10000)."@",$data);
 check_user_mail($new_data);
}

// It checks the email if the it already exist the we send the email to suggest_name function
function check_user_mail($variable)
{
 $select = mysql_query("select * from members where emailid='$variable'");
 if(mysql_num_rows($select))
 {
  suggest_mail($variable);
 }
 else
 {
  echo $variable;
 }
}


// It gets the value send by ajax request and then it pass the value to check_user_mail function
if(isset($_POST['checkmail']))
{
 $term = $_POST['checkmail'];
 mysql_connect('localhost','root','');
 mysql_select_db('demo');
 check_user_mail($term);
 exit();
}

?>

In this step we made four functions two for both,to check and suggest email id and user name to check the whether the value is exist or not and if the value is already exist it suggest some other value to user.You can also add captcha system on registration form using PHP to make your form more secure and prevent from spamming.



Step 4.Connect to the database and do user registration

We make a PHP file save it with a name registration.php which is used to connect and do user registration.

<?php
if(isset($_POST['get_option']))
{
 $host = 'localhost';
 $user = 'root';
 $pass = '';
 mysql_connect($host, $user, $pass);
 mysql_select_db('demo');
 
 $name = $_POST['uname'];
 $mail = $_POST['umail'];
 $pass = $_POST['upass'];
 $store = mysql_query("insert into members values('$name','$mail','$pass')");

 exit();
}

?>

It gets the all values of user and do registration.


That all, this is how to create auto suggestion of user name and email id on user registration using Ajax, jQuery and PHP.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH