AJAX Call to PHP File for HTML Form Not Working

Question

I have a login-form created using HTML that looks like this:

<div class= "form-header">Login</div>
    <div class= "error-message" id= "login-error-exists"></div>
        <form action= "login.php" method= "POST" onsubmit= "loginCheckIncorrect()">
            <div class= "form-field">
                <div class= "form-text">
                    username:
                </div>
                <input type= "text" class= "login-textbox" id= "login-login-username" name= "loginLoginUsername">
            </div>
            <div class= "form-field">
                <div class= "form-text">
                    password:
                </div>
                <input type= "password" class= "login-textbox" id= "login-login-password" name= "loginLoginPassword">
            </div>
            <input type= "submit" value= "Login" class= "signup-confirm">            
        </form>

As you can see, its a simple form that is sent to login.php though POST . Upon submitting this form, it calls a JavaScript (using jQuery) function known as loginCheckIncorrect() , which is shown below:

function loginCheckIncorrect() {
    "use strict";
    var loginLoginUsername = $("#login-login-username").val(), loginLoginPassword = $("#login-login-password");
    alert("test1");
    $.post('usernameIncorrect.php', {'loginLoginUsername': loginLoginUsername, 'loginLoginPassword': loginLoginPassword}, function (data) {
        $("#login-error-exists").html(data);
        alert("test2");
        event.preventDefault();
        return false;
    });
    alert("test3");
    event.preventDefault();
    return false;
}

As you can see, this function creates the variables to store the value of username and password entered in each textbox. It sends an alert out (debugging), and then uses a jQuery.post function to send the variables to the PHP file, which I will show below. It then (is supposed to) takes the data sent back from the PHP file to echo into the error div I have in my HTML form.

It then calls an alert (more debugging) and uses a combination of event.preventDefault() and return false to (supposedly) stop the form from submitting. This is repeated after the post function.

This is my PHP code:

<?php
header("X-XSS-Protection: 1");

include("connect.php");


$username = mysqli_real_escape_string($con, $_POST["loginLoginUsername"]);
$password = mysqli_real_escape_string($con, $_POST["loginLoginPassword"]);

echo "<script>alert('test');</script>";

$sql = mysqli_query($con, "SELECT * FROM main WHERE username='$username' and password='$password'");
$count = mysqli_num_rows($sql);

if ($count == 1) {
    echo "";
    $_SESSION["username"] = $username;
    $_SESSION["password"] = $password;
} else {
    echo "username and/or password is incorrect.";
}
?>

When I attempt to execute this code, the only alert it displays is test1 . Could someone explain to me why this is, and more importantly, how I can fix it? Thanks in advance.

Answer 1

Look at your network requests in your browser's debug panel to see if it's sending what you think it is, put some debug statements in your PHP to see what is and isn't getting hit.

In this case, I think you might be missing the .val() on $('login-login-password') just before the alert("test1") in your javascript.

Answer 2

There is no event defined. That would be a problem and the form will submit. And the preventDefault in the callback is useless since the function already finished.

Answer 3

1) The name of the php file is login.php

2) The url to which you are requesting the post is usernameIncorrect.php

Therefore:

$.post('login.php', {'loginLoginUsername': loginLoginUsername, 'loginLoginPassword': loginLoginPassword}, function (data) {
    $("#login-error-exists").html(data);
    alert("test2");
    event.preventDefault();
    return false;
});

Alert test1 is the only one appearing because the post fails. Probably with a fail event you would have cached the error.

Try, if you want to test that:

$.post('wrongUrl.php', {'loginLoginUsername': loginLoginUsername, 'loginLoginPassword': loginLoginPassword}, function (data) {
    $("#login-error-exists").html(data);
    alert("test2");
    event.preventDefault();
    return false;
})
.fail(function() {
    alert( "error" );
});