Asif18

Author:
{ Comments }

Here is the simple google captcha with dynamic reload. Google give us many of its services for free with proper license. it also allows the captcha image for our website. Captcha is using for avoid Anti Spam users in websites. It is for avoiding spam comments in our blog or websites. How captcha will filter anti spam users means? For E.g you have a form with the fields of username, email, message with the action of POST with the action of `action.php` file. Any user can post the values or spam values without using your website or your form page in browser. Simply spammers will POST the values to your site.com/action.php. In this way the spam comments are posting to your blogs and websites. To avoid this we are using captcha to let know is that user is an human or not. Here is the simple captcha ready to integrate in your website which contains dynamic captcha reload without page reload.

Step 1: Copy paste the below code in your form where you want to avoid spammers

<?php
session_start();
$msg = '';
if(isset($_POST["submit"])){
	$original_captcha = $_SESSION["captcha"]; // session 'captcha' has been alreadey created in captcha.php file, if you want to rename the session open the captcha.php file and find and change the name of the session
	$user_captcha = $_POST["captcha"];
	if($user_captcha == $original_captcha){
		$msg = '<span class="success">Captcha Matched!</span>';
	}else{
		$msg = '<span class="error">Oops! Captcha Mismatched!</span>';
	}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple captcha validation with dynamic captcha refresh by asif18</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#change_captcha").click(function(){
		$("#as_captcha").attr("src", "captcha.php?"+(new Date()).getTime()); // browser will save the captcha image in its cache so add '?some_unique_char' to set new URL for each click
	});
});
</script>
<style>
body{
	margin: 0;
	padding: 0;
	font-family: arial;
	color: #2C2C2C;
	font-size: 14px;
}
h1 a{
	color:#2C2C2C;
	text-decoration:none;
}
h1 a:hover{
	text-decoration:underline;
}
a{
	color: #069FDF;
	cursor:pointer;
}
.wrapper{
	margin: 0 auto;
	width: 1000px;
}
.mytable{
	width: 700px;
	margin: 0 auto;
	border:2px dashed #17A3F7;
	padding: 20px;
}
.success{
	color:#009900;
	font-weight:bold;
}
.error{
	color:#F33C21;
	font-weight:bold;
}
</style>
</head>
<body>
<div class="wrapper">
<h1><a href="">Simple captcha with dynamic refresh</a></h1>
<form method="post" action="<?php $_SERVER['PHP_SELF']; ?>">
<table class="mytable">
<tr>
	<td colspan="2" align="center"><?php echo $msg; ?></td>
</tr>
<tr>
	<td valign="bottom">Enter the captcha</td>
    <td><img src="captcha.php" id="as_captcha" alt="Captcha" /></td>
</tr>
<tr>
	<td><input type="text" name="captcha" /></td>
    <td><a class="a" id="change_captcha">Can't read? try another one</a></td>
</tr>
<tr>
	<td><input type="submit" name="submit" value="Post It" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>

You can the see the image source captcha.php, just download the file there you can get the complete source code which is ready to use. We have used jQuery here for dynamic captcha image change. If the user feels hard to read the captcha image means we need to allow them to change another capcha image by user friendly without reload the whole form or the whole page. Simply use the jQuery onClick() change the captcha image attr() like in this example.

Comments (3)