Call php validation file with ajax call

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.

How do you know it isn't called? Did you check what `data` contains in your `success` handler? If so, add it to your question. Did you make sure your PHP file returns something? Like an `echo()` for example? — icecub, Jul 21 '17 at 22:29
To know any errors that you can have you may use the ajax error function, Use this link to help you: https://stackoverflow.com/questions/6792878/jquery-ajax-error-function — Jose Marques, Jul 21 '17 at 22:32
Please change your Javascript (jQuery) function to this: https://pastebin.com/DxVg2qxk . Open up your browser console and tell us what it returned. — icecub, Jul 21 '17 at 22:39
If you can show me the login.php file, I can tell you exactly what's wrong — Kevin P, Jul 21 '17 at 22:40
Could you please address the comments about logging the data from the success or checking the ajax request in the network console. Regardless of what you are returning in the response, if you never put the data on the page, the alerts in the response are never going to happen. — Taplar, Jul 21 '17 at 22:46
@SafwatAlshazly I just gave you a Javascript code that will tell you _exactly_ what's going wrong. Why are you ignoring it? We can't help you if we don't have any additional information about what's going wrong! That function will give you that information. — icecub, Jul 21 '17 at 22:47
@icecub Sorry, didn't see your comment. I alerted `data` but it showed nothing. regarding the PHP code, I put two alerts inside it to make sure that the file is called, none of the is alerted. I edit the question with some more extra details — Safwat Alshazly, Jul 21 '17 at 22:52
If you put an alert or console log in your success method, and they do not happen, then either the request did not take place, or it is not getting a success response. In which case you need to investigate your network console in your browser to see what the error response was, or do what icecube suggested which should console log details about the error. — Taplar, Jul 21 '17 at 22:54
@SafwatAlshazly I'm not asking you to alert the data. I'm asking you to change your function to the code I put in the link. That will _always_ return something. All we need is what it returns. It's a simple matter of copy / pasting it and tell us the result. Nothing else :) — icecub, Jul 21 '17 at 22:55
So you're request is completing successfully. You just need to do something with your data. Like `$(document.body).append(data)` (for now) — Taplar, Jul 21 '17 at 23:01
Great! So now we know that it does call your PHP file correctly and your Ajax function is working perfectly fine. Just remove the ` — icecub, Jul 21 '17 at 23:04
@Taplar I edited the question with screenshot of what my network console is showing — Safwat Alshazly, Jul 21 '17 at 23:04
Your code working perfectly fine. There is nothing wrong with it. You simply shouldn't return Javascript code with your PHP file. That doesn't work, unless you append it to the DOM, like @Taplar told you. — icecub, Jul 21 '17 at 23:08

score 1 · Accepted Answer · answered Jul 21 '17 at 23:09

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>

Call php validation file with ajax call

1 Answers1