Friends I have created this tutorial to help you learn on how to live check user exists in database with PHP jQuery Ajax and MySQLI
Create a database and import users.sql or simply paste this code in SQL field in your database to import demo data
-- phpMyAdmin SQL Dump -- version 4.9.0.1 -- https://www.phpmyadmin.net/ -- -- Host: 127.0.0.1 -- Generation Time: Apr 03, 2021 at 12:30 AM -- Server version: 10.4.6-MariaDB -- PHP Version: 7.3.8 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET AUTOCOMMIT = 0; START TRANSACTION; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8mb4 */; -- -- Database: `demo` -- -- -------------------------------------------------------- -- -- Table structure for table `users` -- CREATE TABLE IF NOT EXISTS `users` ( `user_id` int(8) NOT NULL, `username` varchar(55) NOT NULL, `email` varchar(55) NOT NULL, `password` varchar(55) NOT NULL, `firstname` varchar(55) NOT NULL, `lastname` varchar(55) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1; -- -- Dumping data for table `users` -- INSERT INTO `users` (`user_id`, `username`, `email`, `password`, `firstname`, `lastname`) VALUES (1, 'eddie', 'eddie@gmail.com', '', 'Eddie', 'Johns'), (2, 'jeremy', 'jeremy@gmail.com', '', 'Jeremiah', 'Thompson'), (3, 'mary', 'mary@gmail.com', '', 'Mary', 'Phillia'); -- -- Indexes for dumped tables -- -- -- Indexes for table `users` -- ALTER TABLE `users` ADD PRIMARY KEY (`user_id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `users` -- ALTER TABLE `users` MODIFY `user_id` int(8) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=4; COMMIT; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
Next, create your HTML form, Lets focus on username field
Give the username input field a name=”username” and id=”username” and add event attribute ; onIput =”checkUsername()”, The checkUsername() function will call a php file which contains a query that checks row count of the Select statement and returns a response
Add a span with id=”check-username” either below the input field or above, this is where the result status will be displayed. This is how complete input field will look like
In the same file let’s now create a function, checkUsername(). You will be required to include jquery js in your file
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function checkUsername() {
jQuery.ajax({
url: "check_availability.php",
data:'username='+$("#username").val(),
type: "POST",
success:function(data){
$("#check-username").html(data);
},
error:function (){}
});
}
</script>
Here is the complete index.php file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Livecheck Username Exists - Cloud Rebue Solutions</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
.intro {
height: 100%;
}
.gradient-custom {
/* fallback for old browsers */
background: #fa709a;
/* Chrome 10-25, Safari 5.1-6 */
background: -webkit-linear-gradient(to bottom right, rgba(250, 112, 154, 1), rgba(254, 225, 64, 1));
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
background: linear-gradient(to bottom right, rgba(250, 112, 154, 1), rgba(254, 225, 64, 1))
}
/* Change dissabled Button color */
#submit:disabled{
background-color: red;
opacity:0.5;
}
</style>
</head>
<body>
<section class="intro">
<div class="mask d-flex align-items-center h-100 gradient-custom">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-9 col-xl-7">
<div class="card">
<div class="card-body p-4 p-md-5">
<h3 class="mb-4 pb-2">Registration Form</h3>
<form action="">
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="firstName" class="form-control" />
<label class="form-label" for="firstName">First Name</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="text" id="lastName" class="form-control" />
<label class="form-label" for="lastName">Last Name</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline datepicker">
<input
type="text"
class="form-control"
id="birthdayDate"
/>
<label for="birthdayDate" class="form-label">Birthday</label>
</div>
</div>
<div class="col-md-6 mb-4">
<h6 class="mb-2 pb-1">Gender: </h6>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="femaleGender"
value="option1"
/>
<label class="form-check-label" for="femaleGender">Female</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="maleGender"
value="option2"
/>
<label class="form-check-label" for="maleGender">Male</label>
</div>
<div class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="otherGender"
value="option3"
/>
<label class="form-check-label" for="otherGender">Other</label>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 mb-4">
<div class="form-outline">
<span id="check-username"></span>
<input type="text" name="username" id="username" class="form-control" onInput="checkUsername()"/>
<label class="form-label" for="username">Username</label>
</div>
</div>
<div class="col-md-6 mb-4">
<div class="form-outline">
<input type="tel" id="phoneNumber" class="form-control" />
<label class="form-label" for="phoneNumber">Phone Number</label>
</div>
</div>
</div>
<div class="row">
<div class="col-12">
<h6 class="mb-3">About You</h6>
<textarea class="form-control" placeholder="Write more about yourself"></textarea>
<div class="mt-4">
<input class="btn btn-info btn-block btn-lg" id="submit" type="submit" value="Submit" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function checkUsername() {
jQuery.ajax({
url: "check_availability.php",
data:'username='+$("#username").val(),
type: "POST",
success:function(data){
$("#check-username").html(data);
},
error:function (){}
});
}
</script>
</body>
</html>
Finally create check_availability.php file. This file checks the database and if rowcount>0 it means username already exists. The results will be displayed in index.php as user tries to type in the username field
<?php
# create database connection
$connect = mysqli_connect("localhost","root","","demo");
if(!empty($_POST["username"])) {
$query = "SELECT * FROM users WHERE username='" . $_POST["username"] . "'";
$result = mysqli_query($connect,$query);
$count = mysqli_num_rows($result);
if($count>0) {
echo "<span style='color:red'> Sorry User already exists .</span>";
echo "<script>$('#submit').prop('disabled',true);</script>";
}else{
echo "<span style='color:green'> User available for Registration .</span>";
echo "<script>$('#submit').prop('disabled',false);</script>";
}
}
?>
Hope the tutorial helps, please show some love by subscribing to my channel
