PHP Captcha using jQuery AJAX

Captcha code in a form is used for ensuring that the form is submitted with manual intervention without any tools or programs. In previous tutorial we have seen about how to add captcha in PHP.

In this tutorial, we are using jQuery AJAX for getting captcha image from PHP. Using jQuery we can also refresh the captcha code by resending AJAX call to generate new captcha image.

View DemoDownload

image

Contact Form with Captcha

This code is for displaying contact form with refreshable captcha image.

<div id="frmContact">
	<div>
		<label style="padding-top:20px;">Name</label>
		<span id="userName-info" class="info"></span><br/>
		<input type="text" name="userName" id="userName" class="demoInputBox">
	</div>
	<div>
		<label>Email</label>
		<span id="userEmail-info" class="info"></span><br/>
		<input type="text" name="userEmail" id="userEmail" class="demoInputBox">
	</div>
	<div>
		<label>Subject</label> 
		<span id="subject-info" class="info"></span><br/>
		<input type="text" name="subject" id="subject" class="demoInputBox">
	</div>
	<div>
		<label>Content</label> 
		<span id="content-info" class="info"></span><br/>
		<textarea name="content" id="content" class="demoInputBox" cols="60" rows="6"></textarea>
	</div>
	<div>
		<label>Captcha</label> 
		<span id="captcha-info" class="info"></span><br/>
		<input type="text" name="captcha" id="captcha" class="demoInputBox"><br>
	</div>
	<div>
		<img id="captcha_code" src="captcha_code.php" />
		<button name="submit" class="btnRefresh" onClick="refreshCaptcha();">Refresh Captcha</button>
	</div>
	<div>
		<button name="submit" class="btnAction" onClick="sendContact();">Send</button>
	</div>
</div>

We have same validation script as we have seen in jQuery contact form tutorial. So, the following code shows only the validation of the captcha field.

if(!$("#captcha").val()) {
	$("#captcha-info").html("(required)");
	$("#captcha").css('background-color','#FFFFDF');
	valid = false;
}

jQuery Captcha Refresh

This simple jQuery script will refresh PHP captcha code and recreate the image with the new code. This new image will be set as captcha image source.

function refreshCaptcha() {
	$("#captcha_code").attr('src','captcha_code.php');
}

PHP Captcha Image Creation

In PHP we are using PHP rand() to generate random number. This random number will be encrypted by using md5() and cropped into 6 character captcha code. Then this code will be added to PHP session and as a source of captcha image by using PHP GD functions.

session_start();
$random_alpha = md5(rand());
$captcha_code = substr($random_alpha, 0, 6);
$_SESSION["captcha_code"] = $captcha_code;
$target_layer = imagecreatetruecolor(70,30);
$captcha_background = imagecolorallocate($target_layer, 255, 160, 119);
imagefill($target_layer,0,0,$captcha_background);
$captcha_text_color = imagecolorallocate($target_layer, 0, 0, 0);
imagestring($target_layer, 5, 5, 5, $captcha_code, $captcha_text_color);
header("Content-type: image/jpeg");
imagejpeg($target_layer);

View DemoDownload

This jQuery code tutorial was published on December 10, 2014.

↑ Back to Top