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

view plain print about
1<form action="<cfoutput>#request.ThisPage#</cfoutput>" method="post" name="getForgotPW" id="getForgotPW">

Then, set up the link...

view plain print about
1<p id="forgotpw-link" style="display:none">
2<a href="#">Did you forget your password?</a>

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)

view plain print about
1<script type="text/javascript">
5// forgot pw
9return false;

Very simple - hide the form, show the link. When the link is clicked, hide the link, show the form.

Here is a working example: