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

Last Updated : Jul 1, 2023

IN - Ajax jQuery PHP MySQL | Written & Updated By - Amruta

In this tutorial we will create a auto suggestion technique for user registration that is applicable for both User Name and User Email Address, 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.

You may also like generate random username using PHP and jQuery.

CHECK OUT THIS TUTORIAL LIVE DEMO →

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

Make a HTML file and define markup and script for user registration
Make a CSS file and define styling for user registration
Connect to the database and check user name and email id of user
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.

I hope this tutorial on username and email suggestion php helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →

About Amruta

Amruta is an Experienced web developer with 4 years for experience she completed her master's with MCA and passionate about programming Languages for creating technical contents like HTML, CSS, JavaScript, Java, Python, PHP, jQuery.

Follow Amruta On Linkedin 🡪