How to reload the google recaptcha widget after us

Question

I have a registration form with the new google recaptcha widget on it. When a user submits info, we check the validation with javascript and return the problems to the page (ex: "please use a valid phone number"). however, since the page doesn't reload, when the user enters correct info and goes to submit again (without having to do the recaptcha again)...the recaptcha is no longer valid and they can't submit without reloading the page.

is there a good solution to this? can I reload the widget somehow? i tried grecaptcha.render but it didn't really do anything.

EDIT:

When I try to render the widget again, it says "placeholder element must be empty"

I tried emptying the element which seemed to work ($('.g-recaptcha').empty();) and then rendering but it still threw the same error.

Answer 1

Try calling the reload() function within ReCaptcha (version 1):

Recaptcha.reload();

How to Reload ReCaptcha using JavaScript?

Answer 2

If you are using grecaptcha.render with jQuery, please ensure that you are actualy setting DOM element, instead of jQuery element:

This will work:

grecaptcha.render( $('.g-recaptcha')[0], { sitekey : 'your_key_here' });

but this wont:

grecaptcha.render( $('.g-recaptcha'), { sitekey : 'your_key_here' });

Answer 3

I had same problem with excelwebzone/recaptcha-bundle for Symfony2. Basicly is says that recaptcha was loaded in past to your DOM and placeholder that should be empty was full.

Those bundles dont have settings for explicit callbacks so you have to make sure that placeholder or even whole form is empty before you load recaptcha.

And mine was stuck in DOM cause i was loading it with AJAX. On second call it was there.

You can simply use $('#your-div-with-form').html('')

Answer 4

Personnaly I reset my element html content with

$('#captcha').html('');

after that I reload recaptcha using

$.getScript("https://www.google.com/recaptcha/api.js");

which load recaptcha content on your

<div id="captcha" class="g-recaptcha" data-sitekey="yourSitePublicKey"></div>

Answer 5

your recaptcha render js event should be called only once in the script, your recaptcha code is not valid if grecaptcha.render js event called second time in script. You should have to check your code so it should not call the grecaptcha.render function second time on validation check.

OR

In console, You will see a Uncaught ReferenceError: Recaptcha is not defined error message, which indicates the problem with the reCAPTCHA script. This is caused due to a bad url in the page - http://api.recaptcha.net/js/recaptcha_ajax.js . Google has updated the reCAPTCHA and moved the location of the script to http://www.google.com/recaptcha/api/js/recaptcha_ajax.js .

also check this post

http://www.instructables.com/id/Fix-reCAPTCHA-errors-on-Instructables/

and this post

Uncaught ReferenceError: Recaptcha is not defined

Answer 6

if you are using new recaptcha 2.0 use this: for code behind:

ScriptManager.RegisterStartupScript(this, this.GetType(), "CaptchaReload", "$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});", true);

for simple javascript

<script>$.getScript(\"https://www.google.com/recaptcha/api.js\", function () {});</script>