Ajax login box doesn't call PHP file to continue process

Question

The Ajax function for logging in and validating doesn't seem to get to the .php file for validation.

I'm new to both JS and Ajax and followed a few online tutorials, I then tried to implement this with what I had in place already and the problems started.

I've put an echo at the top of the page that Ajax calls, it never gets displayed. I've typed into url to be sure and it works fine. (displays the echo)

I've gone over the code a few times and can't see any obvious errors but then I'm not entirely certain of what I should be looking for.

If I leave the PHP in the 'header' of the HTML page it works fine but I understand this is bad practice. Grateful for any help.

HTML:

 <form method="post" action="" id="ourLoginFormID_JS">
                    <div class="ourContactFormElement2">
                        <label for="username">Username:</label>
                        <input type="text" id="username"  name="username" autocomplete="off" class="required" value="<?php if(isset($_POST['username'])) echo htmlentities($_POST['username']); ?>"  />
                    </div>

                    <div class="ourContactFormElement2">
                        <label for="password">Password:</label>
                        <input type="password" id="password" name="password" autocomplete="off" class="required"/>
                    </div>

                    <div class="ourContactFormElement2">
                        <label> &nbsp; </label>
                        <input type="submit" name="loginButton" id="loginButton" value="Login!" onclick="validLogin()"/>
                    </div>

                    <div id="statusLogin"></div>
                </form>

The Ajax:

function validLogin(){

$('.error').hide();
var username = $('#username').val();
if(username == ""){
    $('label#usernameError').show();
    $('input#username').focus();
    return false;
}

$('.error').hide();
var password = $('#password').val();
if(password == ""){
    $('label#passwordError').show();
    $('input#password').focus();
    return false;
}

var params = "username="+username+"&password="+password;
var url = "loginProcessAjax.php";

$("#statusLogin").show();
$("#statusLogin").fadeIn(400).html('<img src="image/loading.gif" />');

$.ajax({
    type: 'POST',
    url: url,
    dataType: 'html',
    data: params,

    beforeSend: function() {
        document.getElementById("statusLogin").innerHTML= 'checking...'  ;
    },

    complete: function() {

    },

    success: function(html) {
        $("#statusLogin").hide();
        document.getElementById("statusLogin").innerHTML= html;
        if(html=="success"){

            window.location = "index.php"

        }

    }
});
}

PHP - I understand there may be some conflicting issues on this page but it doesn't get that far, however if you've any pointers that'd also be fantastic.

<?php
//check fields are filled in
echo "HULLOOOO!!!!!"; // doesn't display when run in function but ok from url

if(empty($_POST) === false){

$username = trim($_POST['username']);
$password = trim($_POST['password']);

//validate fields
if(empty($username) === true || empty($password) === true){
    $errors[] = 'Your username and password are needed.';
}else if($users->userExists($username) === false){
    $errors[] = 'That username does not exist';
}else if($users->emailActivated($username) === false){
    $errors[] = 'You need to activate the account, please check your email.';
}else{

    //start login
    $login = $users->login($username, $password);
    if($login === false){
        $errors[] = 'That username or password is invalid';
//
//            if(empty($errors) === false){
//                echo '<p>' .implode('</p><p>', $errors).'</p>';
//            }

    }else{
        //destroy old session and create new - prevents session fixation attacks
        session_regenerate_id(true);
        //all details are correct - the method returns the id to be sotred as a session
        $_SESSION['id'] = $login;
        //send user to their home page
        echo "success";
        header('Location: userHome.php');
        exit();
    }
}
}

Answer 1

Your data to the post request is not formatted in the right way. Use {'property1': 'value1', etc} .

First try to display the data with PHP, make it more complex when you're sure the connection between jQuery and PHP is working well.

Use Firebug or developer tools to see if there errors occur.