January 14, 2014 3:50 pm

How to create CAPTCHA image verification in PHP and jQuery

Captcha is the simple verification on your web forms that the user is a human or a computer. Its used to prevent spammers on your website. If you use captcha on your web forms its hard for spam bots to submit data to web site. The reason to write this tutorial is to demonstrate how to create captcha image in your application using PHP and jQuery.

CAPTCHA image verification in PHP and jQuery

We have used Fonts to generate text and create a random alpha-numeric word with background texture to prevent OCR readers. Used GD library to generate images.

index.php

File contains PHP code to load captcha image and text box to input visible word.

HTML is mixed to show image and input box and accept post data on the same page to verify. Create session of given captcha word once you submit that word it check that word with saved session word. Include jQuery library to reload captcha image onClick event $(“#captcha”).attr(“src”, “captcha.php?”+Math.random()); this line change src of visible image captcha.php generate captcha image every time it generate random word.

Check submitted word if match then show valid else invalid.

captcha.php

File contains PHP Code to generate captcha image.

This file create image with random string and show in png format on form $captcha = new CaptchaSecurityImages(145, 35, rand(4, 6)); width and height given with random number of latter here we select 4,6 it randomly show 4-6 latter captcha.

Hope you found this tutorial helpful please comment your views and problem faced in configuration.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:
  • saltun

    #new 🙁 🙁 return false; 🙂 🙂

  • Shahbaz Ahmed Bhatti

    COOOOOOOOOOOOOL i understoood how it work. Let me implement in my form

  • Anant

    when i insert data in data base by admin side then webpage auto update without any event effect how it is possible
    like facebook,yahoo criket score without page refresh it show new post/and live score

  • malves

    In my project the image did not appear

  • gabrouze

    You can open in a dialog box the following code to ear the captcha :

    <source src="http://translate.google.com/translate_tts ? tl=en&q=” type=”audio/mp3″ />
    <source src="http://translate.google.com/translate_tts ? tl=en&q=” type=”audio/ogg” />
    Your browser does not support the audio tag.

  • Zalak Thakkar

    Hello,
    Nice tutorial.
    But i have an issue when i reload the captcha. It’s not reloading the captcha image.

  • lay

    does anyone know how to build a google like recaptcha

  • lay

    does anyone know how to build a google like recaptcha

  • Anant Jain

    Nice, but i would like to know that how can i change background image ?