Show/Hide the Cartweaver "forgot password" form with jQuery
Here's a perfect example of the way jQuery makes things so easy, even a caveman programmer can do it.
In Cartweaver, the default Customer Login form is actually two separate forms - one to log in, and one to recall a forgotten password by entering an email address.
I have tried various rearrangements of the default markup on this page for each site I've done, always trying to give the more important 'log in' form a more visible presence than the 'forgot pw' form, without cluttering up the page.
Tonight, i found a solution i like best of all ... hide the forgot pw form altogether, using a simple link to show it if needed.
Really simple, actually. First, give the form a unique ID. Mine looks like this
<form action="<cfoutput>#request.ThisPage#</cfoutput>" method="post" name="getForgotPW" id="getForgotPW">
Then, set up the link...
<p id="forgotpw-link" style="display:none">
<a href="#">Did you forget your password?</a>
</p>
Note the 'display none'. We are using jQuery to hide the form, and show the link. If somebody happens to have javascript disabled, they will see the form , and not the link... i.e. everything still works and makes sense.
Now, a few simple lines of jQuery code. ( You'll also need a copy of jquery.js linked from your page head)
<script type="text/javascript">
$(document).ready(function(){
$('#getForgotPW').hide();
$('#forgotpw-link').show();
// forgot pw
$('#forgotpw-link').click(function(){
$(this).hide();
$('#getForgotPW').show();
return false;
})
});
</script>
Very simple - hide the form, show the link. When the link is clicked, hide the link, show the form.
Here is a working example: https://www.thunderbirdfoundation.com/OrderForm.cfm
<p id="forgotpw-link" style="<cfif IsDefined ('request.PWNotFound')>block<cfelse>none</cfif>;">
<a href="#">Did you forget your password?</a>
</p>
if Login Name is not found we should at least see a link to the forgot password form.