Can anyone get this to work?
You can download the code here http://www.mattgifford.co.uk/sexy-fi-login-forms/ but i can't get it to read a success from checklogin.cfm
index.cfm
<!---
Name: index.cfm
Author: Matt Gifford aka coldfumonkeh
Date: 11/08/2010
Purpose:
Login form to demonstrate the use
of the jQuery UI's shake effect.
--->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>Login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel='stylesheet' href='assets/css/login.css' type='text/css' media='all' />
<link rel='stylesheet' href='assets/css/ui-lightness/jquery-ui-1.8.4.custom.css' type='text/css' media='all' />
<script src="assets/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="assets/js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="login">
<!---
Here, we set an empty div which we'll populate
and add styles using the jQuery UI classes.
--->
<div id="login_message"></div>
<!---
Uber-simple login form. Username and password fields.
No more, no less.
--->
<form name="loginform" id="loginform" onsubmit="return false;">
<p>
<label for="username">Username<br />
<input type="text" name="username" id="username"
class="inputFields"
value=""
size="20"
tabindex="1" />
</label>
</p>
<p>
<label for="password">Password<br />
<input type="password"
name="password"
id="password"
class="inputFields"
value=""
size="20"
tabindex="2" />
</label>
</p>
<p class="submit">
<input type="button"
name="btnLogin"
id="btnLogin"
value="Log In"
tabindex="3" />
</p>
</form>
</div>
<!---
Bring on the jQuery.
--->
<script type="text/javascript">
$(document).ready(function(){
$("#username").focus();
$("#btnLogin").click(function(){
/*
* The login button has been clicked.
* Send an AJAX POST request to the checkLogin.cfm
* page, which will work out the authentication for us.
* We will receive a boolean value in the response.
*/
$.ajax({
url: "checkLogin.cfm",
type: "POST",
cache: false,
data: "&username=" + $("#username").val() + "&password=" + $("#password").val(),
success: function(status){
if (status == 'true') {
/*
* The authentication was a failure. As such, we'll let
* the user down gently with a smile and shake the login
* form. This will act as notification and a little
* 'crowd pleasing' effect to brighten their day.
*/
$("#login_message")
.attr('class', 'ui-state-highlight')
.html('<strong>PERFECT</strong>: You may proceed. Good times.<br />');
} else {
/*
* The authentication was a resounding success! Good times.
* Set the Class attribute for the message element
* and set the html value with the SUCCESS message.
*/
$("#loginform").effect("shake", {times:2}, 100);
/*
* Set the Class attribute for the message element
* and set the html value with the ERROR message.
*/
$("#login_message")
.attr('class', 'ui-state-error')
.html('<strong>ERROR</strong>: Your details were incorrect.<br />');
}
}
});
})
});
</script>
</html>checklogin.cfm
<!---
Name: checkLogin.cfm
Author: Matt Gifford aka coldfumonkeh
Date: 11/08/2010
Purpose:
Dummy login authentication page
checking against static information.
--->
<cfsetting enablecfoutputonly="true" showdebugoutput="false" />
<cfparam name="boolSuccess" type="boolean" default="false" />
<cfif structKeyExists(form, 'username') AND structKeyExists(form, 'password')>
<cfif form.username EQ 'random1000' AND form.password EQ 'password'>
<cfset boolSuccess = true />
</cfif>
</cfif>
<cfoutput>#boolSuccess#</cfoutput>