a few questions/problems with JQuery login script
Hi, I am using a Jquery/PHP/MySQL login script which is supposed to display an error or success message when the user enters their username/password and also if the username/pw is successfull go to a secure page. Right now as I have it coded, this isn't working properly. Basically nothing is displayed either way. Also, wasn't sure if I just needed to replace, the ?secure-page part with the file name of the page I want to go to if successful?
Here is the code as I have it now.
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Ajax Login in php using jquery's fading effects</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<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("?secure-page");
}
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>
</head>
<body>
<div class="login">
<div class="message_success"></div>
<div class="message_fail"></div>
<div class="loading"><img src="loading.gif" width="100" height="100" /></div>
<div class="login-form">
<form id="login_form" method="post" action="">
<table width="268" border="0">
<tr>
<td width="102">Username</td>
<td width="156">
<label>
<input type="text" name="username" id="username" />
</label>
</td>
</tr>
<tr>
<td>Password</td>
<td>
<label>
<input type="password" name="password" id="password" />
</label>
</td>
</tr>
<tr>
<td>Remember me?</td>
<td align="left"><label>
<input type="checkbox" name="checkbox" id="checkbox" />
</label></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="submit" name="button" id="button" value="Submit" />
</label></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>