How to Check Email Availability using jQuery and PHP/MySQLi

evilangel · 2025-02-27T06:28:08+0000

Getting Started

First, we need the jQuery library and also Bootstrap for a better design to our app. I've included these files in the downloadable of this tutorial but if you want, you can download them yourself using the links below:

For Bootstrap
For jQuery
Creating our Database

Next, we create the database that we are going to filter in this tutorial.

I've included a SQL file in the downloadable of this tutorial. All you have to do is import the said file. If you have no idea on how to import, please visit my tutorial How import .sql file to restore MySQL database.

You should be able to create a database named mydb.

Creating our Form

Next, we create our form or input text for the email. Also, I've displayed the available emails in our database for our reference. Create a new file, name it as index.php and paste the codes below.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>How to Check Email Availability using jQuery and PHP/MySQLi</title>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="page-header text-center">Check Email Availability using jQuery</h1>
<div class="row">
<div class="col-sm-4 col-sm-offset-2">
<div class="form-group">
<label>Email</label>
<input type="text" class="form-control" name="email" id="email">
<span id="response" style="display:none;"></span>
</div>
</div>
<div class="col-sm-4">
<table class="table table-bordered">
<thead>
<th>Email</th>
</thead>
<tbody>
<?php
//connection
$conn

=

new

mysqli(

'localhost'

,

'root'

,

''

,

'mydb'

)

;
$sql

=

"SELECT * FROM users"

;
$query

=

$conn

->

query

(

$sql

)

;
while

(

$row

=

$query

->

fetch_assoc

(

)

)

{
echo

"
<tr>
<td>"

.

$row

[

'email'

]

.

"</td>
</tr>
"

;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#email').keyup(function(e){
e.preventDefault();
var email = $(this).val();
$.ajax({
method: 'POST',
url: 'check.php',
data: {keyword: email},
dataType: 'json',
success: function(response){
$('#response').show().html(response);
}
});
});
});
</script>
</body>
</html>

In here, we have setup that upon user keyup, we generate a response.

Creating our Check Script

Lastly, we create the script that checks the availability of the inputted email. Create a new file, name it as check.php and paste the codes below.

<?php
//initailize output
$output

=

''

;
//connection
$conn

=

new

mysqli(

'localhost'

,

'root'

,

''

,

'mydb'

)

;
//input post
$keyword

=

$_POST

[

'keyword'

]

;
//server side email validation
if

(

!

filter_var

(

$keyword

,

FILTER_VALIDATE_EMAIL)

)

{
$output

=

'Invalid email format'

;
}
else

{
//check if email exist
$sql

=

"SELECT * FROM users WHERE email = '$keyword

'"

;
$query

=

$conn

->

query

(

$sql

)

;
if

(

$query

->

num_rows

>

0

)

{
$output

=

'Email already taken'

;
}
else

{
$output

=

'Email is free to use'

;
}
}
echo

json_encode

(

$output

)

;
?>

That ends this tutorial. Happy Coding :)

Download

You must upgrade your account or reply in the thread to view hidden text.

How to Check Email Availability using jQuery and PHP/MySQLi

More options

evilangel

452,292

323,341

323,350