jquery - PHP + Ajax Login

Question

Just having a few issues submitting a login form via ajax, I am primarily a PHP developer, I don't use Jquery + Ajax all that often with PHP.

At the moment If i check the firebug POST data after the form has been submit it does appear to get the username and password that have been added to the form, however the page just reloads regardless of whether an incorrect username and password are added or if they are correct and no session is created.

This is the form:

    <form id="loginform" method="post">
    Username: <input type="text" name="username" id="username" value="">

    Password: <input type="password" name="password" id="password" value="">

    <input type="submit" name="loginsub" id="loginsub" value="Login">
    </form>

This is the Ajax/Jquery:

    <script type="text/javascript">
    $(document).ready(function() {

    $('#loginform').submit(function() {

    $.ajax({
        type: "POST",
        url: '/class/login.php',
        data: {
            username: $("#username").val(),
            password: $("#password").val()
        },
        success: function(data)
        {
            if (data === 'Login') {
                window.location.replace('/user-page.php');
            }
            else {
                alert('Invalid Credentials');
            }
        }
    });

});

});
</script>

And this is the PHP:

    class Users {
 public $username = null;
 public $password = null;

 public function __construct( $data = array() ) {
     if( isset( $data['username'] ) ) $this->username = stripslashes(        strip_tags( $data['username'] ) );
     if( isset( $data['password'] ) ) $this->password = stripslashes( strip_tags( $data['password'] ) );
 }

 public function storeFormValues( $params ) {
    $this->__construct( $params ); 
 }

 public function Login() {
     $success = false;
     try{
        $con = new PDO( DB_DSN, DB_USERNAME, DB_PASSWORD ); 
        $con->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );
        $sql = "SELECT * FROM users WHERE username = :username AND password = :password LIMIT 1";
                    $user = username;

        $stmt = $con->prepare( $sql );
        $stmt->bindValue( "username", $this->username, PDO::PARAM_STR );
        $stmt->bindValue( "password", md5($this->password), PDO::PARAM_STR );
        $stmt->execute();

        $valid = $stmt->fetchColumn();

        if( $valid ) {
        $success = true;
                    session_start();


        session_regenerate_id();
        $_SESSION['user'] = $user['user'];
        session_write_close();
        echo ('Login');
        exit();

        }

        $con = null;
        return $success;
        }catch (PDOException $e) {
        echo $e->getMessage();
        return $success;
     }

 }

I guess it is not working because I am not calling the class and function, but I am not sure how to succesfully do so. I tried creating a controller page in between the 2 that would initiate the php class and function but to no avail.

Just to edit, the login does work correctly if I remove the ajax and just call the php page via the login form action.

Any ideas?

Answer 1

whole issue is in jquery use this instead

$(document).ready(function() {
  $('#loginform').submit(function(e) {
    e.preventDefault();
    $.ajax({
       type: "POST",
       url: '/class/login.php',
       data: $(this).serialize(),
       success: function(data)
       {
          if (data === 'Login') {
            window.location = '/user-page.php';
          }
          else {
            alert('Invalid Credentials');
          }
       }
   });
 });
});