Bladephp: Now with 7+ codeigniter, php, and laravel project 7+ php project From $18/Year From Rs. 1000/Year

Captcha Code in Codeigniter and jQuery

by
Category:codeigniter
php ajax codeigniter jquery
Captcha Code in Codeigniter and jQuery

CAPTCHA is a simple test to determine if a user is a computer or a human. It is used to prevent spam abuse on the websites. So if you use CAPTCHA on your web site forms, this can help in stopping some bots and making life harder for other bots in accessing or using your forms.

In brief the CAPTCHA protection works by generating a random string, writing it to an image, then storing the string inside of a session or by some other method. This is then checked when the form is submitted.

Click here to download and Click here to demo

Captcha Code in Codeigniter and jQuery

 HTML Code

<form class="form-horizontal" method="post" action="" onsubmit="return validateForm(this);">
	<div class="form-group">
		<label for="email" class="cols-sm-2 control-label">Your Email</label>
		<div class="cols-sm-10">
			<div class="input-group">
				<span class="input-group-addon"><i class="fa fa-envelope fa" aria-hidden="true"></i></span>
				<input type="text" class="form-control" name="email" id="email"  placeholder="Enter your Email"/>
			</div>
		</div>
	</div>

	<div class="form-group">
		<label for="username" class="cols-sm-2 control-label">Username</label>
		<div class="cols-sm-10">
			<div class="input-group">
				<span class="input-group-addon"><i class="fa fa-users fa" aria-hidden="true"></i></span>
				<input type="text" class="form-control" name="username" id="username"  placeholder="Enter your Username"/>
			</div>
		</div>
	</div>

	<div class="form-group">
		<label for="password" class="cols-sm-2 control-label">Password</label>
		<div class="cols-sm-10">
			<div class="input-group">
				<span class="input-group-addon"><i class="fa fa-lock fa-lg" aria-hidden="true"></i></span>
				<input type="password" class="form-control" name="password" id="password"  placeholder="Enter your Password"/>
			</div>
		</div>
	</div>

	<div class="form-group">
		<label class="control-label"></label>
		<div class="input-box">
			<div class="btn-group btn-input">

				<div id="imgdiv" style="display: inline;"><img id="img" src="<?= base_url() ?>captcha/getcapachaimage" /></div><img id="reload" src="<?= base_url() ?>img/reload.png" />	

			</div>
		</div>
	</div>
	<div class="form-group">
		<label class="control-label">Enter Image Text <sup>*</sup></label>
		<div class="input-box">
			<input type="text" class="form-control" id="captcha1"  >
			<div id="capacha_error" class="error_alertbox" style="display:none; color: red;"></div>
		</div>
	</div>

	<div class="form-group ">
		<button type="submit" class="btn btn-primary btn-lg btn-block login-button">Register</button>
	</div>

</form>

JavaScript / Jquery Code click on button and change captcha.

$("#reload").click(function () {
	$("img#img").remove();
	var id = Math.random();
	$('<img id="img" src="<?= base_url() ?>captcha/getcapachaimage?id=' + id + '"/>').appendTo("#imgdiv");
	id = '';
});

Button Click and refresh Captcha call in Controller function(captcha/getcapachaimage)

function getcapachaimage()
{
	$captchanumber = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890abcdefghijklmnopqrstuvwxyz';
	$captchanumber = substr(str_shuffle($captchanumber), 0, 6);
	$_SESSION["code"] = $captchanumber;
	$path= base_url().'img/1.jpg';
	$image = imagecreatefromjpeg($path);
	$foreground = imagecolorallocate($image, 175, 199, 200); //font color
	imagestring($image, 5, 45, 8, $captchanumber, $foreground);
	header('Content-type: image/png');
	imagepng($image);
}

Submit button click and Form Validation

function validateForm(form) {
	var flag = 0;
	var status = false;
	var captcha = $('#captcha1').val();
	if (captcha == '') {
		flag = 1;
		var error_text = 'Please enter Image Text.';
		$('#capacha_error').html(error_text);
		$('#capacha_error').show();
	}
	if (flag == 1)
	{
		return status;
	} else
	{
		$.ajax({
			type: "POST",
			url: "<?= base_url() ?>captcha/checkcaptcha",
			global: false,
			data: {captcha: captcha},
			dataType: 'JSON',
			async: false, //blocks window close
			success: function (data) {
				if (data.error)
				{
					var error_text = 'Captcha Code does not Match Please check.';
					$('#capacha_error').html(error_text);
					$('#capacha_error').show();
					status = false;
				} else if (data.success)
				{
					status = true;
				}
			}
		});
		return status;
	}
}

Ajax Call in Controller function (captcha/checkcaptcha)

function checkcaptcha()
{	
	if ($_SESSION["code"] == $this->input->post('captcha')) {
		$json['success']  = true;
	} else {
		$json['error']  = true;
	}
	echo json_encode($json);
}

1 Comments

olidev

05 Jan 2018

You can also create captcha in CodeIgniter without using any JS or jQuery. Just use CAPTCHA Helper function (https://www.cloudways.com/blog/captcha-in-codeigniter/ ). Setup your model and view and call the captcha. That's it.

Html code work in comment box


Related Post