This blog post demonstrate you, how to implement your own simple captcha using PHP, jQuery and AJAX in form.

Description : Captcha is basically a random generate captcha string and which can be stored in session variable for further use.

After that, the generated string is bunched with an image to pretend as a single image in such a way that only human being is able read it.

  • Here we used an alphanumeric string and stored it in a PHP variable.
  • This variable is then passed in str_shuffle() function.
  • After shuffling, we took sub-string of defined length and stored it in a session (global variable).
  • Then, we convert the string into image and used it in our form.

 

 

HTML File: index.html

We have created a simple HTML form.

<!DOCTYPE html>
<html>
<head>
<title>Create Captcha using PHP,jQuery and AJAX</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="mainform">
<div class="innerdiv">
<!-- Required Div Starts Here -->
<h2>Create Captcha using PHP,jQuery and AJAX</h2>
<form id="myForm" method="post" name="myForm">
<h3>Fill Your Information!</h3>
<table>
<tr>
<td>Username:</td>
<td>
<input id='username1' name='username' type='text'>
</td>
</tr>
<tr>
<td>Email:</td>
<td>
<input id='email1' name='email' type='text'>
</td>
</tr>
<tr>
<td>
</td>
<td id="imgparent">
<div id="imgdiv">
<img id="img" src="captcha.php">
</div>
<img id="reload" src="reload.png">
</td>
</tr>
<tr>
<td>Enter Image Text:</td>
<td>
<input id="captcha1" name="captcha" type="text">
</td>
</tr>
<tr>
<td><input id="button" type='button' value='Submit'></td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>

 

CAPTCHA Generating code: captcha.php

Here, we generate our CAPTCHA code in PHP as mentioned above.

<?php
session_start(); // Staring Session
$captchanumber = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz'; // Initializing PHP variable with string
$captchanumber = substr(str_shuffle($captchanumber), 0, 6); // Getting first 6 word after shuffle.
$_SESSION["code"] = $captchanumber; // Initializing session variable with above generated sub-string
$image = imagecreatefromjpeg("bj.jpg"); // Generating CAPTCHA
$foreground = imagecolorallocate($image, 175, 199, 200); // Font Color
imagestring($image, 5, 45, 8, $captchanumber, $foreground);
header('Content-type: image/png');
imagepng($image);
?>

 

jQuery and Ajax Code : script.js

here, we performed validation of other fields and sending user input CAPTCHA text via Ajax to verfy.php file.

$(document).ready(function() {
//change CAPTCHA on each click or on refreshing page
$("#reload").click(function() {

$("img#img").remove();
var id = Math.random();
$('<img id="img" src="captcha.php?id='+id+'"/>').appendTo("#imgdiv");
id ='';
});

//validation function
$('#button').click(function() {
var name = $("#username1").val();
var email = $("#email1").val();
var captcha = $("#captcha1").val();

if (name == '' || email == '' || captcha == '')
{
alert("Fill All Fields");
}

else
{ //validating CAPTCHA with user input text
var dataString = 'captcha=' + captcha;
$.ajax({
type: "POST",
url: "verify.php",
data: dataString,
success: function(html) {
alert(html);
}
});
}
});
});

 

 

VERIFYING CAPTCHA : verify.php

verifying user input CAPTCHA text with generated CAPTCHA string, stored in session variable.

<?php
//CAPTCHA Matching code
session_start();
if ($_SESSION["code"] == $_POST["captcha"]) {
echo "Form Submitted successfully....!";
} else {
die("Wrong TEXT Entered");
}
?>

 CSS File: style.css

Styling HTML elements.

@import "http://fonts.googleapis.com/css?family=Fauna+One|Muli";
#mainform{
width:960px;
margin:20px auto;
padding-top:20px;
font-family:'Fauna One',serif
}
#mainform h2{
width:100%;
float:left;
text-align:center;
margin-top:35px
}
.innerdiv{
width:65%;
float:left
}
form{
background-color:#fff;
color:#123456;
box-shadow:0 1px 1px 1px gray;
width:500px;
margin:50px 250px 0 50px;
float:left;
height:430px
}
h3{
margin-top:0;
margin-bottom:10px;
color:#fff;
background-color:#3C599B;
text-align:center;
width:100%;
height:50px;
padding-top:30px
}
input{
width:250px;
height:30px;
border-radius:3px;
padding:2px;
box-shadow:0 0 10px #a9a9a9;
margin:10px
}
input[type=button]{
background-color:#3C599B;
border:1px solid #fff;
font-family:'Fauna One',serif;
font-weight:700;
font-size:18px;
color:#fff;
margin-top:15px
}
span{
color:green
}
#myForm div{
color:red;
font-size:14px
}
table{
margin-left:40px
}
#imgdiv{
width:160px;
float:left;
margin-left:20px
}
#reload{
float:right;
margin-right:40px
}

Conclusion:

So, in this way you can create your own php captcha, keep following to learn more.