Tagged with "screencast Archives - VileWorks"

PHP Screencast: Hidden Captcha

Sep 7, 2009 by     9 Comments    Posted under: archives

As I was saying in a past–not so documented–article, this is how the Hidden Captcha concept works:

Does the user have JavaScript enabled?

If yes, they’re okay — let’em comment, no annoying captcha required.

No? We’ve got a suspect. Read them their rights and serve them the ultimate “are you human?” test.

I made this 5 minute screencast to earn fame and fortune on Nettuts, but I’m also posting it here along with some textual comments. Figured I’d make it easier for you to copy/paste the whole 2 lines of JavaScript.

Here’s what you start with, the source code from this tutorial.

(Note: be sure to have the Arial font file called arial.ttf in the fonts folder–copy it from your System in there because their archive does not come with it).

This is the JavaScript/PHP I’m pasting in:

<script type="text/javascript">// <![CDATA[
  document.getElementsByName('code')[0].value = '<?php echo $string; ?>';
  document.getElementById('captcha').style.display = 'none';
// ]]></script>

Both lines of JavaScript work on elements from this chunk of HTML:

<div id="captcha">
  <img src="captcha.php" alt="" /><input type="text" name="code" /> Are you human?

The first line of JavaScript sets the correct value for the code text field.

And the second line of JavaScript sets display:none to the captcha div, thus hiding it from anyone with JavaScript enabled.

Hidden Captcha instead of Akismet?