Check Username Availability Using Ajax + PHP+Mysqli

This post all about Check username availability using ajax PHP mysqli. checking username is very popular functionality in e-commerce, social networking websites, insurance, and banking applications. To make a user unique or his identity on this application it requires a username. At the time of the registration, the application will ask to provide username and password, so in that time when the user enters the username, the application should be validated from database uniqueness of users.

Now the question is how to check the username is exist or not in the database without form submit?
So to perform this functionality without a page refresh, we can use Ajax.

Here I have given a below example for check username availability using ajax. you can try the demo by entering the user name “admin” or “Rebecca” as not available and all other as available.

Here also we have some disable and enable registration button for valid username. until username is valid that register button will disable then getting the valid username you can see register button will enable. One more important validation is like same as email id. The same way you can check the email Id is existing or not in the database by using the same function. Below example, you are sending the username to ajax page by POST method and in ajax page that checking whether that username or email exists or not, if yes it will return a true value else returns a false value. based on that will can show the error message in the success section in ajax response. the same way you can send an email if you want to check email is exist or not in mysqli database.

Table of Contents

Step-1 Database:
Step-2 index.php
Step-3 check_user.php
Download the source code:

Step-1 Database:

-- phpMyAdmin SQL Dump
-- version 4.5.1
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: May 03, 2019 at 11:37 AM
-- Server version: 10.1.19-MariaDB
-- PHP Version: 5.6.28

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";

--
-- Database: `testing`
--

-- --------------------------------------------------------

--
-- Table structure for table `users`
--

CREATE TABLE `users` (
`id` int(11) NOT NULL,
`user_name` varchar(250) NOT NULL,
`user_password` varchar(250) NOT NULL,
`created_date` datetime NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

--
-- Dumping data for table `users`
--

INSERT INTO `users` (`id`, `user_name`, `user_password`, `created_date`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3', '2019-01-08 00:00:00'),
(2, 'Rebecca', '21232f297a57a5a743894a0e4a801fc3', '0000-00-00 00:00:00');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `users`
--
ALTER TABLE `users`
ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `users`
--
ALTER TABLE `users`
MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

-- phpMyAdmin SQL Dump

-- version 4.5.1

-- http://www.phpmyadmin.net

-- Host: 127.0.0.1

-- Generation Time: May 03, 2019 at 11:37 AM

-- Server version: 10.1.19-MariaDB

-- PHP Version: 5.6.28

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";

SET time_zone = "+00:00";

-- Database: `testing`

-- --------------------------------------------------------

-- Table structure for table `users`

CREATE TABLE `users` (

`id` int(11) NOT NULL,

`user_name` varchar(250) NOT NULL,

`user_password` varchar(250) NOT NULL,

`created_date` datetime NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=latin1;

-- Dumping data for table `users`

INSERT INTO `users` (`id`, `user_name`, `user_password`, `created_date`) VALUES

(1, 'admin', '21232f297a57a5a743894a0e4a801fc3', '2019-01-08 00:00:00'),

(2, 'Rebecca', '21232f297a57a5a743894a0e4a801fc3', '0000-00-00 00:00:00');

-- Indexes for dumped tables

-- Indexes for table `users`

ALTER TABLE `users`

ADD PRIMARY KEY (`id`);

-- AUTO_INCREMENT for dumped tables

-- AUTO_INCREMENT for table `users`

ALTER TABLE `users`

MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;

Step-2 index.php

<?php
$con = mysqli_connect("localhost", "root", "", "testing");
$sql = "SELECT * FROM emp_details"; 
$result = mysqli_query($con, $sql);
?>


<!DOCTYPE html>
<html lang="en">
<head>
<title>Check username availability using ajax php mysqli</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */

.navbar {
margin-bottom: 0;
border-radius: 0;
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}

/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: auto;
}

/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;} 
}
* {
box-sizing: border-box;
}

/* Add padding to containers */
.container {
padding: 16px;
background-color: white;
}

/* Full-width input fields */
input[type=text], input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}

input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}

/* Overwrite default styles of hr */
hr {
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}

/* Set a style for the submit button */
.registerbtn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}

.registerbtn:hover {
opacity: 1;
}

/* Add a blue text color to links */
a {
color: dodgerblue;
}

/* Set a grey background color and center the text of the "sign in" section */
.signin {
background-color: #f1f1f1;
text-align: center;
}

</style>


</head>
<body>

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span> 
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<!-- <li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li> -->
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>

<div class="container-fluid text-center"> 
<div class="row content">
<div class="col-sm-2 ">
<div class="">
<!-- <img src='amazon-long-vertical.gif' /> -->
</div>
</div>
<div class="col-sm-8 text-left"> 
<h2 align="center">Check username availability using ajax php mysqli</h2>


<hr>

<label for="email"><b>Name</b></label>
<input type="text" placeholder="Enter Name" name="name" required>
<label for="username"><b>UserName</b></label>
<input type="text" name="username" placeholder="Username" id="username" required />
<p id="availability"></p>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

<label for="psw-repeat"><b>Repeat Password</b></label>
<input type="password" placeholder="Repeat Password" name="psw-repeat" required>
<hr>
<p> NB: Admin or rebecca as exist user name</p>

<button type="button" name="register" class="btn btn-info" id="register" disabled>Register</button>

<br /> 
<br /> 
</div>


<div class="col-sm-2">
<div class="">
<!-- <img src='amazon-long-vertical.gif' /> -->
</div>

</div>
</div>
</div>

<!-- <footer class="container-fluid text-center">
<p>Footer Text</p>
</footer> -->

</body>
</html>
<script> 
$(document).ready(function(){ 
$('#username').keyup(function(){

var username = $(this).val();
if(username ==""){
$('#availability').html('');
}else{
$.ajax({
url:'check_user.php',
method:"POST",
data:{user_name:username},
success:function(data)
{
if(data != '0')
{
$('#availability').html('<span class="text-danger">Username not available</span>');
$('#register').attr("disabled", true);
}
else
{
$('#availability').html('<span class="text-success">Username Available</span>');
$('#register').attr("disabled", false);
}
}
})
}
});

}); 
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

<?php

$con = mysqli_connect("localhost", "root", "", "testing");

$sql = "SELECT * FROM emp_details";

$result = mysqli_query($con, $sql);

<!DOCTYPE html>

<head>

<title>Check username availability using ajax php mysqli</title>

<style>

/* Remove the navbar's default margin-bottom and rounded borders */

.navbar {

margin-bottom: 0;

border-radius: 0;

}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */

.row.content {height: 450px}

/* Set gray background color and 100% height */

.sidenav {

padding-top: 20px;

background-color: #f1f1f1;

height: auto;

}

/* Set black background color, white text and some padding */

footer {

background-color: #555;

color: white;

padding: 15px;

}

/* On small screens, set height to 'auto' for sidenav and grid */

@media screen and (max-width: 767px) {

.sidenav {

height: auto;

padding: 15px;

}

.row.content {height:auto;}

}

* {

box-sizing: border-box;

}

/* Add padding to containers */

.container {

padding: 16px;

background-color: white;

}

/* Full-width input fields */

input[type=text], input[type=password] {

width: 100%;

padding: 15px;

margin: 5px 0 22px 0;

display: inline-block;

border: none;

background: #f1f1f1;

}

input[type=text]:focus, input[type=password]:focus {

background-color: #ddd;

outline: none;

}

/* Overwrite default styles of hr */

hr {

border: 1px solid #f1f1f1;

margin-bottom: 25px;

}

/* Set a style for the submit button */

.registerbtn {

background-color: #4CAF50;

color: white;

padding: 16px 20px;

margin: 8px 0;

border: none;

cursor: pointer;

width: 100%;

opacity: 0.9;

}

.registerbtn:hover {

opacity: 1;

}

/* Add a blue text color to links */

a {

color: dodgerblue;

}

/* Set a grey background color and center the text of the "sign in" section */

.signin {

background-color: #f1f1f1;

text-align: center;

}

</style>

</head>

<body>

</button>

</div>

<!-- <li><a href="#">About</a></li>

<li><a href="#">Projects</a></li>

<li><a href="#">Contact</a></li> -->

</ul>

<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>

</ul>

</div>

</nav>

</div>

<h2 align="center">Check username availability using ajax php mysqli</h2>

<hr>

<label for="username"><b>UserName</b></label>

<label for="psw"><b>Password</b></label>

<label for="psw-repeat"><b>Repeat Password</b></label>

<hr>

<p> NB: Admin or rebecca as exist user name</p>

<button type="button" name="register" class="btn btn-info" id="register" disabled>Register</button>

<br />

</div>

</div>

<!-- <footer class="container-fluid text-center">

<p>Footer Text</p>

</footer> -->

</body>

</html>

$(document).ready(function(){

$('#username').keyup(function(){

var username = $(this).val();

if(username ==""){

$('#availability').html('');

}else{

$.ajax({

url:'check_user.php',

method:"POST",

data:{user_name:username},

success:function(data)

{

if(data != '0')

{

$('#availability').html('<span class="text-danger">Username not available</span>');

$('#register').attr("disabled", true);

}

else

{

$('#availability').html('<span class="text-success">Username Available</span>');

$('#register').attr("disabled", false);

}

})

}

});

</script>

Step-3 check_user.php

<?php
$connect = mysqli_connect("localhost", "root", "", "testing"); 
if(isset($_POST["user_name"]))
{
$username = mysqli_real_escape_string($connect, $_POST["user_name"]);
$query = "SELECT * FROM users WHERE user_name = '".$username."'";
$result = mysqli_query($connect, $query);
echo mysqli_num_rows($result);
}
?>

<?php

$connect = mysqli_connect("localhost", "root", "", "testing");

if(isset($_POST["user_name"]))

{

$username = mysqli_real_escape_string($connect, $_POST["user_name"]);

$query = "SELECT * FROM users WHERE user_name = '".$username."'";

$result = mysqli_query($connect, $query);

echo mysqli_num_rows($result);

}

Download the source code:

Click here to download