CMS Design with jQuery and PHP: moving a recaptcha form

reCAPTCHA is a free captcha service which lets you use their captchas for your programs.

I wanted to create a login/password-reminder page, with recaptcha used in both forms.

Unfortunately, you can’t have two recaptcha images on the same page, as every time the image is displayed, it is a new image and the old one is no longer valid (which means that if it’s used in two forms, you can only ever submit the second one.)

A solution that came to me is to “move” the captcha from one form to the other, so you’re only ever actually using one recaptcha.

So how is it done?

demo

In the demo, I’m using jQuery UI to separate the forms into two tabs.

If you look at the source, you will see there is one recaptcha object, in the first table. The table row has the ID “captcha”.

The entire JavaScript used in the demo is this:

$(function(){
	// remove the captcha's script element
	$('#captcha script').remove();
	// set up tabs
	$('.tabs').tabs({
		show:function(event,ui){
			// if the captcha is already here, return
			if($('#captcha',ui.panel).length)return;
			// move the captcha into this panel
			$('table tr:last',ui.panel).before($('#captcha'));
		}
	});
});

The first thing that’s done is that the captcha’s <script> element is removed. If you don’t remove it, then when the table row is moved, the script will be re-interpreted, causing breakage.

Now, the tabs are initialised. We set the show event to run a little function. That function checks to see if the captcha row is contained in the newly-shown panel. If it’s not, then it’s moved there using this line:

$('table tr:last',ui.panel).before($('#captcha'));

The above line means “insert/move the #captcha element in front of the last tr in the table contained in ui.panel“.

This is part of the User Management And Access Control chapter of the up-coming book “CMS Design using jQuery and PHP” ( a sequel, sort-of, to my jQuery 1.3 with PHP).

  1. That’s pretty cool actually. But at the same time, should you really have to enter a captcha every time you login? It’s definitely necessary for the reset though.

  2. I’ve been doing a lot of thinking about this lately. Some of the reasons I’m encouraging a captcha in a login are:

    You don’t need to log in every few minutes.
    taking a few seconds out to fill a captcha is not intrusive – after all, you’re also filling in a password.
    captchas help stop brute force login attacks (I wish there was a captcha for SSH logins!).
    other people are doing it as well 😉

    On the last point, we were comparing a few CMSes in the office today, to see if there are better ways to do the things we’re doing, and one of the top ones we looked at (don’t remember the name – sitewith.us or something similar) was doing exactly that – a captcha for logins and password reminders (although on separate pages)

  3. Nice, i’ve tried to implement this on a ‘signup’ page but each time the user write a wrong captcha, the page reloads and all the input fields are reset, is there any way to prevent this?

  4. JP – fill in the input values based on what was submitted.

    example: if you have an input box for username:
    <input name=”username” />

    pre-fill it:
    <input name=”username” value=”<?php echo $_REQUEST[‘username’]; ?>” />

Leave a Reply

%d bloggers like this: