If you are allowing the user to login with their username and password then you have to make sure that every user has a unique username.
When the user goes for registration on your site check username either after form submits or check it with AJAX while entering.
In this tutorial, I am using jQuery AJAX to check username is available or not.
Contents
1. Table structure
I am using users
table in the tutorial 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=latin1;
2. Configuration
Create config.php
file for database configuration.
Completed Code
<?php $host = "localhost"; /* Host name */ $user = "root"; /* User */ $password = ""; /* Password */ $dbname = "tutorial"; /* Database name */ $con = mysqli_connect($host, $user, $password,$dbname); // Check connection if (!$con) { die("Connection failed: " . mysqli_connect_error()); }
3. HTML
Create an input field for entering username and to show availability response created <div id='uname_response'>
.
Completed Code
<div> <input type="text" id="txt_username" name="txt_username" placeholder="Enter Username" /> <!-- Response --> <div id="uname_response" ></div> </div>
4. PHP
Create ajaxfile.php
file.
Check $_POST['username']
value in users
table. If username exists then return Available.
message otherwise Not Available.
message.
Completed Code
<?php include "config.php"; if(isset($_POST['username'])){ $username = mysqli_real_escape_string($con,$_POST['username']); $query = "select count(*) as cntUser from users where username='".$username."'"; $result = mysqli_query($con,$query); $response = "<span style='color: green;'>Available.</span>"; if(mysqli_num_rows($result)){ $row = mysqli_fetch_array($result); $count = $row['cntUser']; if($count > 0){ $response = "<span style='color: red;'>Not Available.</span>"; } } echo $response; die; }
5. jQuery
Send AJAX request when keyup
event trigger on username field where pass the input value as data
.
On a successful callback write the response in #uname_response
.
Completed Code
<script> $(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){ $('#uname_response').html(response); } }); }else{ $("#uname_response").html(""); } }); }); </script>
6. Demo
7. Conclusion
In this tutorial, I showed how you can check username is already taken by someone or not with AJAX.
I use keyup
event to send AJAX request to check value similarly you can trigger this on any other events – keydown, change, click.
You can view the PDO version of this tutorial here.
If you found this tutorial helpful then don't forget to share.