jQuery Ajax form submit, to call php login script

Question

Thanks for checking out my problem... I'm having trouble submitting a login form via Ajax for a php script to run and return a new set of html items which will be replacing the HTML in #userlinks.... heres what I have so far

$("#login_form").submit(function() { return false; });

$('#login_button').click(function(event) {
    $form = $(this).parent("form");
    $.post($form.attr("action"), $form.serialize(), function(data){
        $('#userlinks').html(data);
    });
});

HTML:
    <form id="login_form" name="login" action="login.php">

PHP:
$username = empty($_COOKIE['username']) ? '' : $_COOKIE['username'];
$id = empty($_COOKIE['id']) ? '' : $_COOKIE['id'];

if ($username && $id) {
throw new RedirectBrowserException('index.php');
} else {
$action = empty($_POST['action']) ? '' : $_POST['action'];
if ($action == 'do_login') {
    $username = empty($_POST['username']) ? '' : $_POST['username'];
    $password = empty($_POST['password']) ? '' : $_POST['password'];
    echo handle_login($username, $password);
} else {
    throw new RedirectBrowserException('index.php');
}
}

The php script checks for post data of username && password, yet all I'm getting is a page refresh and no changes. Nothing returns unless I turn login_button into a link and change the script a bit... Any help would be appreciated!

Answer 1

Try this:

$("#login_form").submit(function(event){

    $.post($(this).attr("action"), $(this).serialize(), function(data){
        $('#userlinks').html(data);
    });

    event.preventDefault();  
});