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

Question

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.

**Warning:** You are wide open to [SQL Injections](https://php.net/manual/en/security.database.sql-injection.php) and should use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](https://php.net/manual/pdo.prepared-statements.php) or by [MySQLi](https://php.net/manual/mysqli.quickstart.prepared-statements.php). Never trust any kind of input! Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). [Escaping is not enough!](https://stackoverflow.com/q/5741187) — Dharman, Oct 12 '21 at 13:02

score 2 · Answer 1 · edited Oct 12 '21 at 05:59

2

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 (){}
  });
}

edited Oct 12 '21 at 05:59

Tomerikoo

18,379
16
47
61

answered Oct 12 '21 at 05:43

Ritesh Kumar

21
1

Thanks, so how can we make this work, like how can the error message be displayed off the click of the signup button. (The ID of the signup button is "sbtn"). – Oct 12 '21 at 05:44
Hey also, I just tried that Ajax out... it isn't working. – Oct 12 '21 at 05:46
After success event you have to show that id where you want to display error and then render response on that id. In your case you are displaying error in #emailExists – Ritesh Kumar Oct 12 '21 at 05:48
I didn't understand, so what would be the code for that? I'm trying out the code you showed, but it isn't working. I want to display the error message, if another email of the same already exists in the database AFTER the user clicks the signup button. I tried your AJAX code, however it isn't working. What should I do? Can you provide me with the final code please? – Oct 12 '21 at 05:51
if you are getting success response from your ajax than do one thing. – Add in login page Add after success event: $('#msg').html(data); Final Ajax function function checkEmail() { jQuery.ajax({ url: "connection.php", data:'email='+$("#email").val(), type: "POST", success:function(data){ $('#msg').html(data); }, error:function (){} }); } – Ritesh Kumar Oct 12 '21 at 05:59
Could you possibly join a google meet and check it out please? Just for 5 minutes. – Oct 12 '21 at 06:01
Sorry this time not possible , I am in office – Ritesh Kumar Oct 12 '21 at 06:05
Oh..ok fine.... – Oct 12 '21 at 06:07

score 0 · Answer 2 · answered Oct 12 '21 at 06:06

0

Condition Check

Check your jQuery is initialized or not
checkemail() This function initializes your click events.
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);

answered Oct 12 '21 at 06:06

Shubham Raturi

116
7

Could you please join a google meet and help me out with this please. thanks. – Oct 12 '21 at 06:08
Please can you joinn a google meet? – Oct 12 '21 at 06:15
Can you please show me here what kind of error you are getting? – Shubham Raturi Oct 12 '21 at 06:18
No, no errors are coming. Its just not working. Like even though an email already exists, when I try to signup, it isn't showing the error message. There is no error, it just isn't working. My Ajax Code: 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 (){} }); } If you don't get it, could you please join a google meet? – Oct 12 '21 at 06:20
Or if you give me your email, I could send you the files, so you could look at them and see what's going on, if you don't wanna join a google meet. – Oct 12 '21 at 06:21
create a button for testing `` and check does that work or not? then I will connect you by my Gmail. – Shubham Raturi Oct 12 '21 at 06:31
Nope it isn't working. Give me your email. I will send you the login.php, connection.php and script.js files. Just check them out, and please let me know the solution, through Gmail. Thanks. – Oct 12 '21 at 06:35
shubhamraturi37@gmail.com – Shubham Raturi Oct 12 '21 at 06:38
Ok, thanks. I'll send you the files. – Oct 12 '21 at 06:38
Hey, I sent you my connection.php and login.php files, but for some reason my script.js file wasn't working. So I'll just paste the script.js code here: 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 (){} }); } – Oct 12 '21 at 06:44
Hey could we meet now in a google meet please? – Oct 12 '21 at 15:17

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

2 Answers2