How can We verify Captcha with Ajax in Codeigniter?

Captcha is necessary part of any form. But if we see with end user point of view, a user feels bad when he/she has to give a right verification code and also have to face an error message if it is invalid code. “I don’t like Captcha and even i didn’t design any form with Captcha”.

If we give captcha verification using ajax, then it reduces user’s troubles.

We can check captcha on blur event or on submitting a form and alert the user about invalid code entered.

In Codeigniter ( i used it CI in some place ) it is easy to do that:

In first step you will show captcha using CI method in simple way. Example:

function Ajax_captcha(){
	var code = $("#code").val();	 // get the code entered 
	if(code.length&gt;1){
	$('#Loading').show(); // show the loader image
	$.post("<!--?php echo base_url()?-->Site/Ajax_Captcha",{
		code: $('#code').val()
	}, function(response){
		$('#Ifno').fadeOut();
		setTimeout("RemoveAJAXCaptcha('Info', '"+escape(response)+"')", 400);
	});
	}
	return false;
}
// this function will hide the loader image and show the result as inner html
function RemoveAJAXCaptcha(id, response){
  $('#Loading').hide();
  $('#'+id).html(unescape(response));
  $('#'+id).fadeIn();
}

function Ajax_captcha(){

var code = $("#code").val(); // get the code entered

if(code.length>1){

$('#Loading').show(); // show the loader image

$.post("Site/Ajax_Captcha",{

code: $('#code').val()

}, function(response){

$('#Ifno').fadeOut();

setTimeout("RemoveAJAXCaptcha('Info', '"+escape(response)+"')", 400);

});

}

return false;

}

// this function will hide the loader image and show the result as inner html

function RemoveAJAXCaptcha(id, response){

$('#Loading').hide();

$('#'+id).html(unescape(response));

$('#'+id).fadeIn();

}

In html:

<input id="code" name="code" type="text" value="">
<span id="Info"></span>
<span id="Loading">
<img src="&lt;?php echo base_url()?&gt;images/loader.gif" alt="">
</span>

<img src="<?php echo base_url()?>images/loader.gif" alt="">

</span>

And in your controller:

function Ajax_Captcha($code,$this-&gt;session-&gt;userdata('yourSessionVarOfCaptcha'))
{
  if ($code==strtoupper($this-&gt;session-&gt;userdata('yourSessionVarOfCaptcha')))
  {
       return true;
  }
  else
  {
      return false;
  }
}

function Ajax_Captcha($code,$this->session->userdata('yourSessionVarOfCaptcha'))

{

if ($code==strtoupper($this->session->userdata('yourSessionVarOfCaptcha')))

{

return true;

}

else

{

return false;

}

Few More Brilliant Posts !