I have a order form and before submitting order, user will have to go through captcha code for cash on delivery...
I am checking whether captcha code is right or wrong using jQuery.
If captcha code entered was wrong i won't let user submit form using preventDefault and will alert about error. But after entered captcha code right, It still doesn't let user submit the order.
Here is my code...
//for captcha code
var captcha = null;
//check if captcha code is right
$("#apply_captcha").on("click", function(){
var captchaUrl = '<?php echo base_url(); ?>index.php/checkout/check_captcha/';
var captcha = $('#userCaptcha').val(); //user entered value for captcha
$.ajax({
url: captchaUrl,
type: 'POST',
data: 'captcha='+captcha,
success: function(result)
{
if(result === "success")
{
captcha = true;
$('#captcha_msg').hide();
$('#userCaptcha').css('border', '2px solid green');
}
else
{
captcha = false;
$('#captcha_msg').text("Sorry, Your captcha is wrong.");
$('#captcha_msg').css('color', '#cb2700');
}
}
});
});
$('#orderform').submit(function(e)
{
if(!pincode_available)
{
alert("Sorry, We are not supplying any product at this area right now.");
e.preventDefault();
}
else if(!captcha)
{
alert("Sorry, Your captcha is wrong");
e.preventDefault();
}
});
Remove the var keyword for the 'captcha' variable in the 'click' function. Looks like its creating a new local variable while the submit function is using the global variable.
P.S: Please see the comments on the question to see how we arrived at the solution.