why is ajax not passing input field value to php parser? - php

Question

I am building an account sign-up page that checks the users email address against the db to ensure said user isn't creating a duplicate account. Using ajax to report if email exists in the db. When typing the email address into the form I always get "email is ok". Meaning that it doesn't exist in the db. However, it is incorrect. If I assign the email as a variable in the php parser like $email="email#exists.com" then it will actually report back the correct result. I'm guessing that the parser isn't getting the value from the form in order to add to the query. Do you know why this isn't working?
<input type="text" id="password" class="form-control" name="password" value="" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" placeholder="password" autocomplete="off" required />
Ajax:
<script>
function ajax_post(){
// Create our XMLHttpRequest object
var hr = new XMLHttpRequest();
// Create some variables we need to send to our PHP file
var url = "email_check.php";
var fn = document.getElementById("firstname").value;
var ln = document.getElementById("lastname").value;
var e = document.getElementById("email").value;
var pwd = document.getElementById("password").value;
var vars = "firstname="+fn+"&lastname="+ln;
hr.open("POST", url, true);
// Set content type header information for sending url encoded variables in the request
hr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Access the onreadystatechange event for the XMLHttpRequest object
hr.onreadystatechange = function() {
if(hr.readyState == 4 && hr.status == 200) {
var return_data = hr.responseText;
document.getElementById("status").innerHTML = return_data;
}
}
// Send the data to PHP now... and wait for response to update the status div
hr.send(vars); // Actually execute the request
document.getElementById("status").innerHTML = "processing...";
}
</script>
and the parser:
<?php
include 'db.php';
$test= $_POST['email'];
$sql="SELECT email FROM users where email = '$test' LIMIT 1";
$result = mysqli_query($conn,$sql);
if(mysqli_num_rows($result) > 0)
{
echo 'email is in use.';
exit();
} else if(mysqli_num_rows($result) < 1){
echo 'email is ok';
exit();
}
?>

Answer 1

You didn't add the email field to your vars when you sent the request, in this line:
var vars = "firstname="+fn+"&lastname="+ln;

Answer 2

You need to send email to your parser not firstname/lastname
var vars = "email="+e;