Catcha can be implemented using either a single form post for simple forms, or using AJAX for forms with many fields.
AJAX should be used where field values being reloaded is onnerous to implement.
Example AJAX implementation
$(document).ready(function() {
$("#form_requests").validationEngine();
$('#fsubmit').click(function(){
$.get('/infomaxim/aurora_security/captcha_check.asp?captcha='+URLEncode($('#enter').val()),function(response){
if (response == 'True') {
$('#enter').val('');
if ($("#form_requests").validationEngine({returnIsValid:true}) == true) {
$("#genre_other").val($("#genre_other_text").val());
document.getElementsByName("form_requests_subjects")[0].value="";
$('input[id^=genre]:checked').each(function(){
document.getElementsByName("form_requests_subjects")[0].value+=$(this).val()+";";
});
$("#form_requests").submit();
}
else
{
RefreshImage('imgCaptcha')
}
}
else
{
RefreshImage('imgCaptcha')
{
alert('Image text does not match.');
}
return false;
}
});
});
})
Form xHTML
<div>
<div class="code">
<img id="imgCaptcha" alt="" height="40" src="/infomaxim/aurora_security/captcha.asp" width="141" />
<a href="javascript:void(0)" onclick="RefreshImage('imgCaptcha')" style="font-size: 10px;">
Can't read it? Click here.</a>
</div>
<div class="enter-code">
<label for="enter" style="width: 100%;">
Enter the text in the image *</label>
<input id="enter" class="text" name="enter" type="text" value="" />
<p style="clear: both;"> </p>
<a id="fsubmit" class="btn">
<img height="25" src="/images/btn-submit.gif" width="67" /></a>
<a id="fclear" class="btn" onclick="resetForm('form_requests');">
<img height="25" src="/images/btn_clear_new.gif" width="58" /></a>
</div>
</div>