On the website, there must be a unique identifier for each user. It can be the username, email-id or any string using which user can log in to the website and access it.
Before adding the user using the registration form it must be check if the username is available or not.
This can either done after submitting the form or using jQuery AJAX to display availability status before submitting the form.
In this tutorial, I show how you can check username already exists or not in the MySQL database table using jQuery AJAX PHP and PDO.
Contents
1. Table structure
I am using users table in the example –
CREATE TABLE `users` ( `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT, `username` varchar(80) NOT NULL, `fullname` varchar(80) NOT NULL, `password` varchar(80) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=utf8;
2. Configuration
Create a config.php for a database connection.
Completed Code
<?php
$server = "localhost";
$username = "root";
$password = "";
$dbname = "tutorial";
// Create connection
try{
$conn = new PDO("mysql:host=$server;dbname=$dbname","$username","$password");
$conn->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
}catch(PDOException $e){
die('Unable to connect with the database');
}
3. HTML
Create a <input type='text' id='txt_username'> for username input and create a <div id='uname_response' > to display a message on whether a username exists or not using jQuery.
Completed Code
<div> <input type="text" class="textbox" id="txt_username" name="txt_username" placeholder="Enter Username" /> <!-- Response --> <div id="uname_response" ></div> </div>
4. AJAX
Create ajaxfile.php file.
Check if 'username' is POST or not.
If POST then check $_POST['username'] is exists or not in the 'users' table or not.
If exists then return "Not Available" otherwise "Available" message.
Completed Code
<?php
include 'config.php';
if(isset($_POST['username'])){
$username = $_POST['username'];
// Check username
$stmt = $conn->prepare("SELECT count(*) as cntUser FROM users WHERE username=:username");
$stmt->bindValue(':username', $username, PDO::PARAM_STR);
$stmt->execute();
$count = $stmt->fetchColumn();
$response = "<span style='color: green;'>Available.</span>";
if($count > 0){
$response = "<span style='color: red;'>Not Available.</span>";
}
echo $response;
exit;
}
5. jQuery
Define keyup event on #txt_username selector.
Read the value and check if it is empty or not.
If empty then empty the #uname_response selector otherwise send AJAX POST request to 'ajaxfile.php' file where pass username as data.
On successful callback write a response in #uname_response.
Completed Code
$(document).ready(function(){
$("#txt_username").keyup(function(){
var username = $(this).val().trim();
if(username != ''){
$.ajax({
url: 'ajaxfile.php',
type: 'post',
data: {username:username},
success: function(response){
// Show response
$("#uname_response").html(response);
}
});
}else{
$("#uname_response").html("");
}
});
});
6. Demo
7. Conclusion
I used keyup event to display username status while typing but you can also use other events like onblur on the textbox or click on the button.
