Reload captcha image after Ajax call
Posted: Mon Sep 21, 2009 9:37 pm
I have a feedback form on my website which is processed using ajax so the page doesn't reload and a message is returned if there are any fields missing or incorrect. It works fine.
The trouble is that I have now added a captcha to the form. I need it to refresh if the code entered was wrong, but it doesn't as the page doesn't reload.
How can I force just the image to refresh without reloading the page.
Here's the ajax code
Here's the code for the captcha
The trouble is that I have now added a captcha to the form. I need it to refresh if the code entered was wrong, but it doesn't as the page doesn't reload.
How can I force just the image to refresh without reloading the page.
Here's the ajax code
Code: Select all
$(document).ready(function()
{
$("#support_form").submit(function()
{
//remove all the class add the messagebox classes and start fading
$("#msgbox").removeClass().addClass('messagebox').text('Validating....').fadeIn(1000);
//check the username exists or not from ajax
$.post("form.php",{fname:$('#fname').val(),email:$('#email').val(),message:$('#message').val(),security_code:$('#security_code').val() } ,function(data)
{
if(data=='yes') //if correct login detail
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Message Submitted!!').addClass('messageboxok').fadeTo(900,1,
function()
{
//redirect to secure page
document.getElementById('support_form').reset();
});
});
}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
if (data=='noname') {
$(this).html('A name must be entered...').addClass('messageboxerror').fadeTo(900,1);
} else if (data=='noemail') {
$(this).html('We need an email address to get back to you...').addClass('messageboxerror').fadeTo(900,1);
} else if (data=='nomess') {
$(this).html('Please enter a message...').addClass('messageboxerror').fadeTo(900,1);
} else if (data=='wrongstr') {
$(this).html('Security code incorrect. Please try again...').addClass('messageboxerror').fadeTo(900,1);
}
});
}
});
return false;//not to post the form physically
});
});
</script>
Code: Select all
<img src="CaptchaSecurityImages.php" /><br>
Security Code:
<input id="security_code" name="security_code" type="text" />