Page 1 of 1

Reload captcha image after Ajax call

Posted: Mon Sep 21, 2009 9:37 pm
by barb woolums
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

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>
 
Here's the code for the captcha

Code: Select all

 
<img src="CaptchaSecurityImages.php" /><br>
                                                                                                                Security Code: 
                                                                                                                <input id="security_code" name="security_code" type="text" />
 

Re: Reload captcha image after Ajax call

Posted: Tue Sep 22, 2009 11:49 am
by kaszu
You need to change SRC of the image to something else, for example "CaptchaSecurityImages.php?random=12345"

Code: Select all

<img src="CaptchaSecurityImages.php" id="captchaImage" />

Code: Select all

 
function reloadCaptcha () {
    $('#captchaImage').attr('src', 'CaptchaSecurityImages.php?random=' + (new Date).getTime());
    //(new Date).getTime()  return timestamp in milliseconds, so we can make sure that image won't be in browsers cache
}
 

Re: Reload captcha image after Ajax call

Posted: Tue Sep 22, 2009 12:01 pm
by jackpf
Yeah, I had trouble with this with my captcha which also uses ajax.

You could also try sending a no-cache header from the image.

Re: Reload captcha image after Ajax call

Posted: Tue Sep 22, 2009 8:21 pm
by barb woolums
Thanks kaszu, your solution worked like a charm