How to reload reCAPTCHA on browser back button in Google Chrome

[scottystang]

Hey everyone,

I've noticed a bug which appears to only be happening in Google
Chrome. After a user submits a form that includes reCAPTCHA I
redirect them to a thank you page. If they click their browser's back
button, the reCAPTCHA reloads on all browsers expect Google Chrome.
The problem is if the user tries to submit the form again with the
same reCAPTCHA, the validation fails.

Any ideas? How can I force a reCAPTCHA reload on browser back?

[Johnny]

I'm experiencing this same bug on a project I'm working on, and have
not found a solution. Ironically, you may have noticed the random
iframe that gets inserted before the closing body tag, and which often
breaks the layout of the page. (This is a different iframe than the
one used by the captcha itself.) The purpose of this iframe, as far
as I have been able to find, is supposedly to fix this browser history
issue in Webkit browsers. Apparently that "fix" is failing. I have
not tested it in Safari, but I can confirm that the history issue
still happens in Chrome. See: http://groups.google.com/group/recaptcha/browse_thread/thread/ed057e23705797ab

Unfortunately, the answer to your question found in the following
thread was simply, "Don't make the user press the Back button:"
http://groups.google.com/group/recaptcha/browse_thread/thread/5a86a4a69798ef33/372d957d6f726180?lnk=gst&q=safari+back+button#372d957d6f726180

What a silly solution. Especially when well-known web apps, such as
Gmail, work very hard to be compatible with the back button in user-
intuitive ways. The back button can be our friend.

Anyway, I have put this bug on the back burner for a while, but will
take a look at it again tomorrow. The hack solution that comes to
mind is to call Recaptcha.reload() in a document.ready event (assuming
you're using a library with such an event.) If this doesn't work, you
might have to overload the Recaptcha.finish_reload callback, as
mentioned in this blog (this is nasty, as this callback is not
officially supported):
http://www.brandonturner.net/blog/2009/02/reload_recaptcha_with_error/

Good luck!

[Robby Lockeby]

I have noticed the same issue.  The bad part is that if someone answers the recaptcha challenge incorrectly, they get the error message.  Then they hit the back button and the same challenge displays, but even if they answer it correctly the 2nd time, recaptcha doesn't recognize it as being correct and the user is again directed to the error message.  This puts the user in an endless loop.  I have modified the error message telling the user to refresh the recaptcha challenge when they hit the back button.  Not much of a fix, but not sure what else to do about it 

[hijinx...@yahoo.com]

I found a quick hack that fixes this issue.  On the page with the recaptcha add the following jquery script

<script>
$(document).ready(function(){
  $("#form_div").Show();
);
</script>

Just replace ".form_div" with whatever div houses your form.  Now when the user hits the back button it refreshes the recaptcha image.

[John Martin]

I attempted using the script below but that didn't work. Instead of forcing the user to use the back button which is ugly, I wanted to do an AJAX call and keep the user on the form until they enter the correct values. The problem is that the api/verify function can only be called once. What I discovered however is that there is a api/noscript function as well that can be called first. The script returns a challenge string that can be passed to api/verify subsequently.

So, what I did was to create two scripts, validate.asp that calls the api/noscript, which parses the returning HTML looking for a textarea that contains the challenge string. If found, it returns the string otherwise an error. In the form validation javascript, it injects the challenge string if successful or alerts the user to the error, reloads the recaptcha and sets focus to the input field.

-John

[Bao Nguyen]

Hi, this is the easy method that works with Chrome: add reload function on HTML body as below:

<body onload="javascript:Recaptcha.reload()">

And reCaptcha image auto reloads in Chrome when user click the back button.

Rgds,

Bao Nguyen