Reload captcha image after Ajax call

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Reload captcha image after Ajax call

Post 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" />
 
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Reload captcha image after Ajax call

Post 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
}
 
User avatar
jackpf
DevNet Resident
Posts: 2119
Joined: Sun Feb 15, 2009 7:22 pm
Location: Ipswich, UK

Re: Reload captcha image after Ajax call

Post 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.
User avatar
barb woolums
Forum Contributor
Posts: 134
Joined: Sun Feb 08, 2009 9:52 pm

Re: Reload captcha image after Ajax call

Post by barb woolums »

Thanks kaszu, your solution worked like a charm
Post Reply