Ajax/jquery login form failing

Question

I've looked over this a 1000 times. I cannot see why it's not working.

It's a simple ajax login form. It returns false even if the credentials are correct. (I tested ajax_login.php by posting directly to it)

Ajax function:

$(document).ready(function() {
$("#submit_login").click(function() {


var username = $("#username").val();
var password = $("#password").val();

    $.ajax({

        type: "POST",
        url: "scripts/ajax_login.php",
        data: "username=" + username + "&password=" + password,
        success: function(result) {
            if(result == '0')
            {
                $(document.location = 'index.php?    page=profile&user=' + username);
            }
            else
            {
                $("#login_error").show("fast");
            }
        }
    });         
    return false;
});
});

ajax_login.php

session_start();
require('../conf/config.php');

if($_POST)
{

$u = mysql_real_escape_string($_REQUEST['username']);
$p = md5(mysql_real_escape_string($_REQUEST['password']));

$con = mysql_connect($mysql_server,$mysql_user,$mysql_password);
$db = mysql_select_db($mysql_db);

$query = mysql_query("SELECT * FROM users WHERE username = '$u' AND password = '$p'");

if(mysql_num_rows($query) > 0)
{
    $sid = session_id();
    $query = "UPDATE users SET sid='$sid' WHERE username='$u'";
    $result = mysql_query($query);

    if($result)
    {
        $_SESSION['loggedin'] = $u;
        echo '0';
    }
}
}

Form:

<div class="login_form">
<form action="scripts/ajax_login.php" method="POST">
Login<br /><br />
Username: <br />
<input type="text" name="username" id="username" /> <br />
Password: <br />
<input type="password" name="password" id="password" />
</div>
<input type="checkbox" name="remember" id="rem" value="checked"/><label for="rem">Stay logged in?</label><br />
<?php $formKey->outputKey(); ?>
    <input type="submit" value="Login!" name="submit" id="submit_login" />
   </form>

try moving return false into else block of success function. also is your document.location syntax correct? — DG3, Apr 10 '12 at 19:15
If these are snippets from your actual code then it's prone to SQL Injection attacks (well, under certain circumstances: http://stackoverflow.com/questions/1220182/does-mysql-real-escape-string-fully-protect-against-sql-injection ). — dezso, Apr 10 '12 at 19:57
If @SimpleCoder 's answer was correct, be sure to mark it as correct by clicking the checkmark - give credit where due to thank people :) — Mattygabe, Apr 11 '12 at 11:59
If one of the answers provided doesn't work, or if the assumptions answerers make are incorrect, the only way to get an answer is to provide that feedback, and edit your answer. Or accept the answer that is correct. — Mattygabe, Apr 16 '12 at 11:51

score 3 · Answer 1 · answered Apr 10 '12 at 19:14

3

It's always going to return false, since $.ajax() (as do the other jQuery ajax methods) operates asynchronously by default. You will need to do all event handling inside a callback (like your success callback, for example).

Also, I would suggest not doing: if (result == '0'). Instead, use ===.

Ideally, you should instead be returning JSON, or at least something that's not true, false, 0, 1, etc. Those four values (and others) can be confused easily when it comes to JavaScript's Boolean handling.

answered Apr 10 '12 at 19:14

Chris Laplante

29,338
17
103
134

1

If you need the click handler to return `false`, then you must do as @SimpleCoder suggested, set the `async` AJAX option to `false` which makes the AJAX call synchronous and will wait until either `success` or `error` are called. Browsers not named Firefox will "lock up", so if you have any type of loading graphic it doesn't work all that well. So, if you don't need the request to be `synchronous`, just let your success and error handlers do their thing when the request returns. – Mattygabe Apr 10 '12 at 19:51

Mattygabe · Answer 2 · 2012-04-13T15:30:18.590

Aside from the fact that the return statement is executed before either of your callback functions (success and error) are called, and it doesn't seem that anything is done with the return value of the click handler function for $("#submit_login"), what may be happening is though you are making an AJAX call on the click event, the browser is also submitting a form post because #submit_login is a submit type button - whether or not an AJAX call is being performed, the page does a reload on the form submit (so it looks as if the click handler is returning false instead of hitting your success handler). Change it to a non-submit type button:

<input type="button" value="Login!" name="submit" id="submit_login" />

There are other ways of doing this, such as using Javascript's preventDefault in your handler, like so:

$("#submit_login").click(function(ev) {
    ev.preventDefault();
    //Rest of code...

As I said before, doesn't seem like the return value is being used at all here, so you really don't need it to return false. Whatever needs done can be put into the success/error handlers.

score 0 · Answer 3 · answered Jul 19 '13 at 14:12

Not tested but you should try this:

$.ajax({
    type: "POST",
    url: "scripts/ajax_login.php",
    data: {"username":username, "password":password},
    success: function(result) {
        if(result==='0')
        {
            $(document.location = 'index.php?page=profile&user='+username);
        }
        else
        {
            $("#login_error").show("fast");
            return false;
        }
    }
});

Ajax/jquery login form failing

3 Answers3