How To Check Username & Email Already Exists Using Jquery Ajax In PHP Mysql

In this post you will learn how to check username & email is already exists in database using jquery AJAX in PHP mysql.

So, when you enter your username or email, at this time the Ajax function, called the server, is the username or email that is entered unique or not.

The database is checked on the server side and determined whether the username or email entered is available or not. Then it will return to the Ajax request for the username and email or not and the results will be displayed immediately without refreshing the page.

Table of Contents

Create a Database in MySQL

The first step in this tutorial is the creation of a MySQL database. you can create tables by running SQL queries. Create a table ‘users’ in database using the following SQL query.

-- Database: `testing`
-- --------------------------------------------------------
-- Table structure for table `users`
--
CREATE TABLE `users` (
  `id` int(50) NOT NULL PRIMARY KEY AUTO_INCREAMENT,
  `name` varchar(50) NOT NULL,
  `email` varchar(50) NOT NULL,
  `username` varchar(50) NOT NULL,
  `age` varchar(50) NOT NULL,
  `city_name` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Create MySql Connection in PHP

For importing and exporting database in MySql will make a separate file ‘dbCongif.php’. Add the following code and replace the database credentials with yours. You can find your db credentials in Application Access details:

dbCongif.php

<?php
	// Database configuration 
	$dbHost     = "localhost"; 
	$dbUsername = "root"; 
	$dbPassword = ""; 
	$dbName     = "testing"; 
	 
	// Create database connection 
	$con = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName); 
	 
	// Check connection 
	if ($con->connect_error) { 
	    die("Connection failed: " . $con->connect_error); 
	}
?>

Create HTML Form Page

index.php

<!Doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Check username & email already exists using jquery ajax in php mysql</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
  <body style="background-color: #ebebeb">
    <div class="container" style="margin-top: 50px;">
      <h2 class="text-center">Check username & email already exists using jquery ajax in php mysql</h2>
      <div class="row">
        <div class="col-md-3"></div>  
        <div class="col-md-6" style="margin-top:20px; margin-bottom:20px;">
          <form id="formSubmit">
            <div class="form-group">
              <label>Username</label>
              <input type="text" class="form-control" id="username" placeholder="Username">
              <span id="message" style="color:#ff1a1a"></span>
            </div>
            <div class="form-group">
              <label>Email</label>
              <input type="text" class="form-control" id="email" placeholder="Email">
              <span id="message" style="color:#ff1a1a"></span>
            </div>
            <button type="submit" class="btn btn-success">Submit</button>
          </form>
        </div>
      </div>
    </div>
  </body>
</html>

Create jquery AJAX Script

<!--- Check username exists using jquery ajax --->
<script type="text/javascript">
  $(document).ready(function(){
      $("#formSubmit").on("submit",function(e){
        e.preventDefault();
        var username = $("#username").val();
        var email = $("#email").val();
      if (username !=="" && email !== "") {
            $.ajax({
              url : "checkUsername.php",
              type : "POST",
              cache:false,
              data : {username:username,email:email},
              success:function(result){
                if (result == 1) {
                  $("#message").text('Sorry... username or Email is already exists');
                }else{
                  $("#message").text('Username saved successfully');
                }
              }
            });
        }else{
          $("#message").text('Please fill the all fields');
        }
      });
  });
</script>

Create PHP page to check username or email availability

checkUsername.php

<?php	
    // Include database connection
    include_once "dbConfig.php";
    // Check username is already exists in database

    $username = $_POST['username'];
    $email = $_POST['email']; 
    $query = "SELECT * FROM users WHERE username = '$username' || email = '$email'";
    $result = $con->query($query);
    
    if ($result->num_rows > 0) {
        echo 1;
    }else{
      $query = "INSERT INTO users ('name,email,username,age,city_name') 
                VALUES('john cena',$username','$email',35,'colifornia')";
      $result = $con->query($query);
      echo 0;
    }
?>

Output

How to Check username & email already exists using jquery ajax in PHP mysql

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊