Hey,Welcome to shortlearner, today we will see how to check that email is already registered in database, with the use of ajax and java-script.
Most of the time we see that the user is registering same email id in database and it is registered in the database without checking that it was already registered in database.
but with the help of ajax and java-script we can show our users that their email is registered or not registered in our database by showing them a message.
Also Read :
PHP Login Script With Remember me.
Change password using javascript, php and mysqli.
Password and Confirm Password Validation Using JavaScript
Check Email is Already Registered in Database using Ajax and JavaScript.
How to hide extension of html and php file.?
This will help to prevent redundancy of data in our database.
In this tutorial we will use maxcdn classes of bootstrap , AJAX and JavaScript for maximize output.
put the below maxcdn classes of bootstrap inside the head section of your html code.
<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
.white{
color:#000;
background-color:#fff;
}
.btn-facebook {
color: #ffffff;
-webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #2b4b90;
*background-color: #133783;
background-image: -moz-linear-gradient(top, #3b5998, #133783);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3b5998), to(#133783));
background-image: -webkit-linear-gradient(top, #3b5998, #133783);
background-image: -o-linear-gradient(top, #3b5998, #133783);
background-image: linear-gradient(to bottom, #3b5998, #133783);
background-repeat: repeat-x;
border-color: #133783 #133783 #091b40;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3b5998', endColorstr='#ff133783', GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}
.btn-facebook:hover,
.btn-facebook:focus,
.btn-facebook:active,
.btn-facebook.active,
.btn-facebook.disabled,
.btn-facebook[disabled] {
color: #ffffff;
background-color: #133783 !important;
*background-color: #102e6d !important;
}
.btn-facebook:active,
.btn-facebook.active {
background-color: #0d2456 9 !important;
}
we use external stylesheet in this tutorial, so put the above css in the head section of your html code..
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Check Email is Already Registered </title>
<style type="text/css" href="css/style.css"></style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<h3>Login via site</h3>
</div>
<div>
<form accept-charset="UTF-8" role="form">
<fieldset>
<div>
<input placeholder="yourmail@example.com" name="email" type="text" id="email" onBlur="checkAvailability()">
<span id="email-availability-status"></span>
</div>
<div>
<input placeholder="Password" name="password" type="password" value="">
</div>
<div>
<label>
<input name="remember" type="checkbox" value="Remember Me"> Remember Me
</label>
</div>
<input type="submit" value="Login">
</fieldset>
</form>
<hr/>
<center><h4>OR</h4></center>
<input type="submit" value="Login via facebook">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Now we will call the JavaScript function which will trigger our ajax query. in ajax query we will call the check-availability page . in check-availability page we will run our php script that will compare the email id from the database,
if the email is registered in database, a message will popup in red color and show the user that email is already registered, otherwise the popup is appear in green color and show the user that email id is available.
<script>
function checkAvailability() {
$("#loaderIcon").show();
jQuery.ajax({
url: "check_availability.php",
data:'email='+$("#email").val(),
type: "POST",
success:function(data){
$("#email-availability-status").html(data);
$("#loaderIcon").hide();
},
error:function (){}
});
}
</script>
Put the Above JavaScript in the head section of html code.
check-availability.php
<?php
$con= mysqli_connect("localhost","root","","dbname");
if(!empty($_POST["email"])) {
$qry="SELECT email FROM user WHERE email='" . $_POST["email"] . "'";
$result = mysqli_query($con,$qry);
$row = mysqli_fetch_row($result);
if($row>0)
{
echo "<span style='color:red'> Email already exists .</span>";
echo "<script>$('#email-availability-status').prop('disabled',true);</script>";
} else{
echo "<span style='color:green'> Email available for Registration .</span>";
echo "<script>$('#email-availability-status').prop('disabled',false);</script>";
}
}
?>
I quite like looking through an article that can make men and women think.
Also, many thanks for allowing me to comment!
What’s Happening i’m new to this, I stumbled upon this
I have found It absolutely helpful and it has aided me out loads.
I’m hoping to give a contribution & aid other customers like its aided me.
Great job.
This was beautiful Admin. Thank you for your reflections.
Every weekend i used to go to see this website, because i want enjoyment, for the reason that this this website
conations genuinely good funny stuff too.
Nice post. I learn something totally new and challenging on websites
I’m often to blogging and i really appreciate your content. The article has actually peaks my interest. I’m going to bookmark your web site and maintain checking for brand spanking new information.
I for all time emailed this weblog post page to all my
friends, since if like to read it then my links will too.