Home > database >  How to check if email already exists in database and display the error message if so using AJAX
How to check if email already exists in database and display the error message if so using AJAX

Time:10-12

So, what I'm trying to do is when the user is logging in, I want to check the database to see if the email they are using has already been registered before on the database, and if it is registered, I want to display the error message "Email address is already taken.", which apparently can only be done using AJAX. So basically, three files are involved in this particular process: "login.php file", which is where the span tag to the HTML code is, which is where I want to actually echo out the error message, and the login.php file, has the signup form, which is where I actually want to check if the email exists WHILE the user is typing in the email input field. The second file is script.js, where I have the AJAX code, which is included in only the login.php file. And finally is the connection.php file, where my db connection, and the php code for checking if the email exists in the database is.

Here's the code, for a better outlook:

PHP (connection.php):

$sql = "SELECT * FROM users WHERE email='$email'";
$result = mysqli_query($connection, $sql);

if(mysqli_num_rows($result) > 0){
  echo "Email address already taken.";
} else {
  $sql = "INSERT INTO users (firstname, lastname, email, password) VALUES ('$fname', '$lname', '$email', '$hashed_password')";
}

HTML (login.php):

<span style="margin-top:56px; position: fixed; margin-left: -498px; font-size: 14px; color: red; visibility: hidden" id="emailExists" name="emailExists" class="emailExists">Email address already taken.</span>

AJAX (script.js):

function checkEmail() {
  jQuery.ajax({
    url: "connection.php",
    data:'email=' $("#email").val(),
    type: "POST",
    success:function(data){
$("#emailExists").html(data);
},
error:function (){}
});
}

However, this isn't working. What should I do? Now, the php code is working for sure. I've tested it too, on the connection.php file, it is actually echoing out "Email address already exists.", if it exists in the database. But I want it to echo in the login page, in the span tag, when the user is typing itself, so I guess it's a problem with the AJAX or something, I'm not really sure.

Please help me. Thank you so much.

Also I have include jQuery libraries in the login.php file.

CodePudding user response:

Your #emailExists span is hidden so success result not showing. In ajax success event first of all you have to show #emailExists span:

$("#emailExists").attr.('visibility', 'visible');

So your final ajax will be:

function checkEmail() {
  jQuery.ajax({
    url: "connection.php",
    data:'email=' $("#email").val(),
    type: "POST",
    success:function(data){
      $("#emailExists").attr.('visibility', 'visible');
      $("emailExists").html(data);
    },
    error:function (){}
  });
}

CodePudding user response:

Condition Check

  1. Check your jQuery is initialized or not
  2. checkemail() This function initializes your click events.
  3. Check your console log for what kind of error you found there.

if everything is ok, then send to your code in JSON format in your connection.php like

$data = array("message"=>"Email address already taken.");
echo Json_encode($data);

and in your js code add this after the success response

$("#emailExists").html(data.message);
  • Related