The Captcha Show

CAPTCHA or Completely Automated Public Turing Tests to Tell Computers and Humans Apart, exist to ensure that user input has not been generated by a computer (sounds quite long). These peculiar puzzles are commonly used on the Web to protect registration and comment forms from spam. Captcha is one of the many essential part in website or web application to stop spams getting in. There are various ways of creating and different varieties of the same.
But here is a one very simple but effective one. I have written and used this code for WordPress but the same can be used for any type of PHP site; all you have to do is to replace the ‘<?php echo bloginfo(template_directory);?>’ with your website link or site address.

The First Part

The input box is for the user for keying-in the generated captcha code. The ‘img’ for displaying the dynamic image created by the php code.

Refresh button for reloading a new captcha image. ‘loadXMLDoc()’ function is triggered by on click event.
Note: The above three line of codes goes in to the file where you want to show the captcha image, get the input from the user and a reload button for re-generation of captcha code.

The Second Important

The above PHP code goes in to the file ‘captcha.php’. This is the file where the captcha code image is created. For an easier understanding, I have commented within the code and hope its easy to understand.

The Last

The last one is a simple code of AJAX for sending the randomly generated 6 digit number. One thing you might feel awkward is having PHP code within Javascript. Its quite easy and its available in most of the popular websites. The only change to done is that showing the path of the file to which the generated number to be passed on.

Above said method is one and with the same code we have another possibility i.e. instead of passing the generated number through a variable, we could pass the same number as a parameter for the function ‘loadMXLDoc()’. It works the same way with no difference.

Thanks for reading this post and as usual, I’m open to suggestion and critics (positive of course).
Do comment on!


Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He is also an amateur photographer mostly macro shots.
  • A very impressive article. Well prepared. Very motivating!! Set off on to way

  • I tried taking a look at your website with my new iphone 4 and the page layout does not seem to be right. Might want to check it out on WAP as well as it seems most cellphone layouts are not really working with your web site.

  • Alvina

    there’s no doubt that your blog has one of the best explanation on this matter. thanks for all you’ve done.