check username availability using ajax and javascript – How to check if username already exists in database using JavaScript?

check username availability using ajax and javascript Live Username Availability Check using PHP and jQuery AJAX Example with full source code.

check username availability using ajax and javascript, PHP with MySQL

The CheckAvailability JavaScript function gets called when the Button is clicked.

Database Script for members Table

members.sql

CREATE TABLE IF NOT EXISTS `members` (
  `memberId` int(8) NOT NULL AUTO_INCREMENT,
  `memberName` varchar(55) NOT NULL,
  `password` varchar(55) NOT NULL,
  `firstName` varchar(55) NOT NULL,
  `lastName` varchar(55) NOT NULL,
  PRIMARY KEY (`memberId`)
)

INSERT INTO `members` (`memberId`, `memberName`, `password`, `firstName`, `lastName`) VALUES
(24, 'Rakesh', '', 'Rakesh', 'Bhandeto'),
(26, 'milan', '', 'davada', 'demoliya'),
(27, 'krish', '', 'krishna', 'kkv'),
(28, 'mayur', '', 'mayur', 'dhameliya');

Database connection

DatabaseConfig.php

<?php
class DatabaseConfig {
    private $host = "localhost";
    private $user = "root";
    private $password = "Pakk#$%87956";
    private $database = "pakainfo_v1";
    
    private static $link;
    
    function __construct() {
        $this->link = $this->connectDB();
        if(!empty($this->link)) {
            $this->selectDB();
        }
    }
    
    function connectDB() {
        $link = mysqli_connect($this->host,$this->user,$this->password,$this->database);
        return $link;
    }
    
    function selectDB() {
        mysqli_select_db($this->link, $this->database);
    }
    
    function numRows($query) {
        $result  = mysqli_query($this->link, $query);
        $rowcount = mysqli_num_rows($result);
        return $rowcount;
    }
}
?>

Don’t miss : PHP JQuery AJAX Live Check Email Availability

Check Username Availability Form Interface

jQuery AJAX Handler to Request User Availability
index.php

<style>
body{width:50%;}
#frmCheckmembername {border-top:#F0F0F0 2px solid;background:#FAF8F8;padding:10px;}
.demoInputBox{padding:7px; border:#F0F0F0 1px solid; border-radius:4px;}
.check-available{color:#2FC332;}
.check-not-available{color:#D60202;}
</style>
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script>
function checkAvailability() {
	$("#loaderIcon").show();
	jQuery.ajax({
	url: "check_availability.php",
	data:'membername='+$("#membername").val(),
	type: "POST",
	success:function(data){
		$("#member-availability-check").html(data);
		$("#loaderIcon").hide();
	},
	error:function (){}
	});
}
</script>

<div id="frmCheckmembername">
  <label>Check membername:</label>
  <input name="membername" type="text" id="membername" class="demoInputBox" onBlur="checkAvailability()"><span id="member-availability-check"></span>    
</div>
<p><img src="LoaderIcon.gif" id="loaderIcon" style="display:none" /></p>

Match Username against Database using PHP

check_availability.php

<?php
require_once("DatabaseConfig.php");
$db_handle = new DatabaseConfig();


if(!empty($_POST["membername"])) {
  $query = "SELECT * FROM members WHERE memberName='" . $_POST["membername"] . "'";
  $member_count = $db_handle->numRows($query);
  if($member_count>0) {
      echo "<span class='check-not-available'> membername Not Available.</span>";
  }else{
      echo "<span class='check-available'> membername Available.</span>";
  }
}
?>

I hope you get an idea about check username availability using ajax and javascript.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.