help altering JQuery login script

[webguync]

I am using JQuery (along with PHP/MySQL) to create a login script which looks for a username/password in the database and either displays a success message or failure message and then if successful redirects to secure page. At least that is what I want, but nothing happens, the login screen just stays there. Also the messages don't get displayed.

 

Here is the JQuery code.

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".loading").hide();
$(".message_fail").hide();
$(".message_success").hide();
$("#login_form").submit(function()
{
$(".login-form").hide();
$(".loading").fadeIn(200);

$.post("login.php",{ username:$('#username').val(),password:$('#password').val()} ,function(data)
{
$(".loading").hide();

if(data == '1')
{
$('.message_success').html('<p>Success - Redirecting...</p>');
window.location.replace("SecurePage.php");
}
else
{
$('.message_fail').html('<p>Login Failed - Please Try Again</p>');
$(".login-form").fadeIn("slow");
}
$(".message_fail").fadeIn("slow").delay(1000).fadeOut(1000);
});
return false;
});
});
</script>
<style type="text/css">
<!--
.login {
   background-color: #9CF;
   border-right-width: medium;
   border-bottom-width: medium;
   border-left-width: medium;
   border-right-style: solid;
   border-bottom-style: solid;
   border-left-style: solid;
   border-right-color: #333;
   border-bottom-color: #333;
   border-left-color: #333;
   text-align: center;
   font-size: 14px;
   font-family: Arial, Helvetica, sans-serif;
   color: #333;
   padding: 10px;
   margin-top: 100px;
   margin-right: auto;
   margin-left: auto;
   border-top-width: medium;
   border-top-style: solid;
   border-top-color: #333;
   width: 270px;
}
.message_fail {
   color: #333;
   background-color: #F60;
   border: 1px solid #F00;
   padding: 2px;
   font-family: Arial, Helvetica, sans-serif;
}

.message_success {
   color: #333;
   background-color:#096;
   border: 1px solid #F00;
   padding: 2px;
   font-family: Arial, Helvetica, sans-serif;
}
input {
   border: 1px solid #333;
   padding: 2px;
}
.top {
   font-family: Arial, Helvetica, sans-serif;
   color: #333;
   background-color: #CCC;
   position: absolute;
   left: 5px;
   top: 5px;
   width: 746px;
}
-->
</style>