Often in registration form we need a a feature to check the live availability of user. Obviously it is worth that after submitting all the details to tell the user that user already registered. It's better approach to tell the user while filling the form.
In this article, we will see a live check availability of email id by using AJAX, jQuery, and MySQL.
You will require to enter the email id and you will be able to check weather the email id already exist or not while typing the email id.
Here is the HTML and jQuery part.
index.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
<!DOCTYPE html>
<html>
<title>Live Email Availability Checking using PHP, jQuery and Ajax</title>
<head>
<style>
.error {
color: #FF0000;
}
.success{
color: #008000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#email_id').keyup(function() {
var email_id = $(this).val();
$('#message').html('<img src="loader.gif" width="150" />');
$.post("check-availability.php", {email_id: email_id} , function(data)
{
if (data.status == true)
{
$('#message').attr('class','success');
} else {
$('#message').attr('class','error');
}
$('#message').html(data.message);
},'json');
});
});
</script>
</head>
<body>
<h1>Live Username and Email Availability Checking using PHP, jQuery and Ajax </h1>
<input type="text" name="email_id" id="email_id">
<span id="message"></span>
</body>
</html>
|
Here on key up we are sending the AJAX request with data email_id to check-availability.php and we will get response from server side in AJAX success callback.
We are returning the 'status' from server side like if email id not exist in 'users' table then 'status' will be true else 'status' will be false.
Based on status I'll be changing the class attribute in span tag. I also return message from the server based on email id availability and set the message in span tag.
Now to to check the email id in table we will need a database connection so here is the MySQL connection with PHP.
connection.php
|
1
2
3
4
5
6
7
8
9
|
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "demo_users";// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
|
Now here is the code for checking the email id availability. I'm considering the table name is 'users' and column name id 'email'.
check-availability.php
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<?php
include_once 'connection.php';
$data = [];
$emailId = htmlspecialchars($_POST['email_id']);
try{
$data['status'] = false;
if (!filter_var($emailId, FILTER_VALIDATE_EMAIL)) {
$data['message'] = "Invalid email format";
} else {
$stmt = $conn->prepare('select email from users where email = ?');
$stmt->bind_param('s',$emailId);
$stmt->execute();
$result = $stmt->get_result();
if ($result->num_rows<1){
$data['message'] = 'Email id available!';
$data['status'] = true;
}else{
$data['message'] = 'Email id already exist!';
}
}
}
catch (\Exception $exception){
$data['message'] = $exception->getMessage();
}
echo json_encode($data);
|
Here I'm using prepared statement for executing my MySQL query and check the rows count against the email id.
More from my site
-
Dynamically load data on div scroll using php, mysql, jquery and ajax
-
Dependent dropdown example in PHP, MySQL
-
How to pretty JSON fromat using JavaScript/jQuery?
-
Copy to clipboard example in JavaScript/jQuery | How To Copy to Clipboard
-
Email invoice in PDF | Generate PDF in Laravel | MPDF
-
Function return type in PHP 7 and void return type in PHP 7.1