Call php validation file with ajax call - php

Question

I am trying to submit a form using Ajax, the problem is the validation file I made is not called at all (I checked it by putting a bit of js alert inside the PHP validation file). I searched the internet and tried a lot of solutions but none worked. Is there something wrong I am making in my code?
Here is my HTML:
<form method="post" id="signup">
<div class="form-group">
<input type="fname" name="fname" id="fname" value="" class="form-control" placeholder="Your First name" />
</div>
<div class="form-group">
<input type="lname" name="lname" id="lname" value="" class="form-control" placeholder="Your Last name" />
</div>
<div class="form-group">
<input type="email" name="email" id="email" value="" class="form-control" placeholder="Your Email" />
</div>
<div class="form-group">
<input type="password" name="password" id="password" value="" class="form-control" placeholder="Your Password" />
</div>
<div class="form-group submit-btn">
<input id="signupsumbit" type="submit" name="submit" value="Sign Up" class="btn btn-success btn-lg"/>
</div>
</form>
And here is the ajax call:
$(function (){
$('#signup').on('submit', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
data: $('#signup').serialize(),
url: 'login.php',
success: function (data) {
alert("data is"+data);
}
});
});
});
Here is a bit of my PHP code:
include("connection.php");
echo "<script>alert(2)</script>";
if (isset($_GET['logout']) and $_GET['logout']==1 and isset($_COOKIE[id]))
{
setcookie("email", '', time()-60*60*24);
setcookie("password", '', time()-60*60*24);
setcookie("id", '', time()-60*60*24);
$message = "You have been logged out! Come back soon!";
}
if(mysqli_connect_error()) // if failed to connect to database
{
die("Could not connect to database"); //stop the whole script from runnning
}
if (isset($_POST['submit']) and $_POST['submit'] == 'Sign Up')
{
echo '<script>console.log(1)</script>'; //
$error = '';
$success = '';
// email validation
$email = $_POST['email'];
if (empty($_POST['email']))
{
$error .="<br />Please enter your email";
}
else
{
if (!filter_var($email, FILTER_VALIDATE_EMAIL))
{
$error .="<br />Please enter a valid email address";
}
}
.
.
.
.
?>
And of course, the PHP file I made validation at is called login.php.
As you may notice, I put two alerts in my PHP code, I alerted 2 to make sure that the file is called, and alerted 1 to make sure that the form was posted. Odds are, when I submit the form the normal way (with no AJAX), both of alerts work, but when I submit it with AJAX, none of them is alerted.
My Console shows this:
Any help would be appreciated. Thanks.

Answer 1

Testing your script, i found that the submit button is not sent to your login.php script. If you e.preventDefault() and then later trigger the submit, javascript was submitting the form but not the button. To fix your issue create a hidden field with name submit and value Sign Up and remove the name attribute from your submit button (don't need that) and it should work fine.
<form method="post" id="signup">
<input type="hidden" name="submit" value="Sign Up"> <!-- note this hidden field -->
<div class="form-group">
<input type="fname" name="fname" id="fname" value="" class="form-control" placeholder="Your First name" />
</div>
<div class="form-group">
<input type="lname" name="lname" id="lname" value="" class="form-control" placeholder="Your Last name" />
</div>
<div class="form-group">
<input type="email" name="email" id="email" value="" class="form-control" placeholder="Your Email" />
</div>
<div class="form-group">
<input type="password" name="password" id="password" value="" class="form-control" placeholder="Your Password" />
</div>
<div class="form-group submit-btn">
<input id="signupsumbit" type="submit" value="Sign Up" class="btn btn-success btn-lg"/><!-- note the removed name attribute -->
</div>
</form>