How to Check username & email already exists using jquery ajax in php mysql


Check username & email already exists using jquery ajax in php mysql
In this post you will learn how to check username & email is already exists in database using jquery AJAX in PHP mysql.So, when you enter your username or email, at this time the Ajax function, called the server, is the username or email that is entered unique or not. The database is checked on the server side and determined whether the username or email entered is available or not. Then it will return to the Ajax request for the username and email or not and the results will be displayed immediately without refreshing the page.

1.Create the database table name is called users 

-- Database: `testing`
-- --------------------------------------------------------
-- Table structure for table `users`
--
CREATE TABLE `users` (
`id` int(50) NOT NULL,
`name` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`username` varchar(50) NOT NULL,
`age` varchar(50) NOT NULL,
`city_name` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

2.Create database configuration file

dbCongif.php

<?php
// Database configuration
$dbHost = "localhost";
$dbUsername = "root";
$dbPassword = "";
$dbName = "testing";

// Create database connection
$con = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection
if ($con->connect_error) {
die("Connection failed: " . $con->connect_error);
}

?>

3.Create HTML Form Page

index.php
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Check username & email already exists using jquery ajax in php mysql</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body style="background-color: #ebebeb">
<div class="container" style="margin-top: 50px;">
<h2 class="text-center">Check username & email already exists using jquery ajax in php mysql</h2>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6" style="margin-top:20px; margin-bottom:20px;">
<form id="formSubmit">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" id="username" placeholder="Username">
<span id="message" style="color:#ff1a1a"></span>
</div>
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" id="email" placeholder="Email">
<span id="message" style="color:#ff1a1a"></span>
</div>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>

4.Create jquery AJAX Script

<!--- Check username exists using jquery ajax --->
<script type="text/javascript">
$(document).ready(function(){
$("#formSubmit").on("submit",function(e){
e.preventDefault();
var username = $("#username").val();
var email = $("#email").val();
if (username !=="" && email !== "") {
$.ajax({
url : "checkUsername.php",
type : "POST",
cache:false,
data : {username:username,email:email},
success:function(result){
if (result == 1) {
$("#message").text('Sorry... username or Email is already exists');
}else{
$("#message").text('Username saved successfully');
}
}
});
}else{
$("#message").text('Please fill the all fields');
}
});
});
</script>

5. Create PHP page to check username or email availability 

checkUsername.php

<?php

// Include database connection

include_once "dbConfig.php";

// Check username is already exists in database

$username = $_POST['username'];
$email = $_POST['email'];

$query = "SELECT * FROM users WHERE username = '$username' || email = '$email'";

$result = $con->query($query);

if ($result->num_rows > 0) {
echo 1;
}else{
$query = "INSERT INTO users ('name,email,username,age,city_name')
VALUES('john cena',$username','$email',35,'colifornia')"
;
$result = $con->query($query);
echo 0;
}


?>

Output

Check username & email availability using jquery ajax in php mysql

You can always support by sharing on social media or recommending my blog to your friends and colleagues.
If you have any suggestions / problems about this tutorial, please comment on the  form below.😊


Leave a Reply