Generally We use Captcha in the form to ensure that the form is submitted with manual intervention without any tools or programs. In this article we will show PHP captcha using jQuery AJAX. Using jQuery we can also refresh the captcha code by resending AJAX call to generate new captcha image.
Refresh PHP Captcha using jQuery AJAX
Steps :
1. Create a PHP or HTML page with a form
2. Include JQuery file in Head tag of the file
3. Include CSS/Script code given below
4. Create captcha_code.php file with below given code for captcha creation
Step1: Form with Captcha
This code is for displaying a form with refreshable captcha image.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <form id="frmCaptcha" name="frmCaptcha"> <div> <label>Name</label> <input id="name" class="input" name="name" type="text" /> </div> <div> <label>Email</label> <input id="email" class="input" name="email" type="text" /> </div> <div> <label>Message</label> <textarea id="message" class="input" cols="60" name="message" rows="6"></textarea> </div> <div> <label>Captcha</label> <input id="captcha" class="input" name="captcha" type="text" /> </div> <div><img id="captcha_code" src="captcha_code.php" alt="" /> <button class="btnRefresh" name="submit">Refresh Captcha</button> </div> <div> <button class="btnAction" name="submit">Send</button> </div> </form> |
Step2: Include JQuery lib
0 1 | <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> |
It is included locally but we can include it by online also.
Step3: Include Scripts
Here we are validating Captcha code on click of send button.
On click of refresh button we are refreshing the captcha and creating a new image with new captcha code.
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | $(document).ready(function(){ $('.btnAction').click(function(){ if($('#captcha').val() == '') { alert("Please enter the captcha code"); return false; } }) $('.btnRefresh').click(function(){ $("#captcha_code").attr('src','captcha_code.php'); return false; }) }) |
Step 4: Captcha Image Creation using PHP
In server side PHP script, 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. This session will be used to validate captcha code where we are posting the form.
0 1 2 3 4 5 6 7 8 9 10 11 | session_start(); $random = md5(rand()); $captcha_code = substr($random, 0, 6); $_SESSION["captcha_code"] = $captcha_code; $target = imagecreatetruecolor(70,30); $captcha_background = imagecolorallocate($target, 255, 120, 119); imagefill($target,0,0,$captcha_background); $captcha_fore_color = imagecolorallocate($target, 0, 0, 0); imagestring($target, 5, 5, 5, $captcha_code, $captcha_fore_color); header("Content-type: image/jpeg"); imagejpeg($target); |
Before processing the form at server side, you can validate the user submitted captcha in the following manner:
0 1 2 3 4 5 6 7 | session_start(); $captcha = $_POST["captcha"]; if(empty($captcha) || $captcha !== $_SESSION["captcha_code"]) //Captcha validation fail else //Captcha validation pass |
This it the way to implement PHP Captcha using jQuery AJAX where you can render and refresh captcha image using AJAX for your form.