How to reload the google recaptcha widget after us

问题:

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.

回答1:

The method you are looking for is grecaptcha.reset()

However, in order for this function to work you have to render the reCaptacha explicitly like this : <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

回答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' });

回答3:

I was able to do it just by using:

grecaptcha.reset();

回答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>

回答5:

Here's some code to accompany @tzafar's answer:

var myCaptcha = null;
function prepCaptcha() {
    if (myCaptcha === null)
        myCaptcha = grecaptcha.render(document.getElementById('my-captcha'), {
            'sitekey': myCaptchaKey,
            'theme': 'light'
        });
    else
        grecaptcha.reset(myCaptcha);
}

In my case, my-captcha is the id of a div inside of a Bootstrap modal. I run prepCaptcha() in the event handler for the modal's shown.bs.modal event. The first time, it initializes the captcha. On subsequent shows of the modal, it resets it.

Also, note that you can quickly verify that you're getting a new captcha by printing the completed captcha's value:

console.log(grecaptcha.getResponse(myCaptcha));

You shouldn't see the same value twice.

回答6:

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

回答7:

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>

回答8:

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('')

回答9:

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

Recaptcha.reload();

How to Reload ReCaptcha using JavaScript?

回答10:

<script>
function cform(token) {
$.ajax({
type: 'POST',
url: 'contact_chk.php',
data: $('#cform').serialize(), 
success: function(response) {
grecaptcha.reset();
$("#con_msg").html(response);
document.getElementById("name").value='';
document.getElementById("subject").value='';
document.getElementById("email").value='';
document.getElementById("phone").value='';
document.getElementById("message").value='';
},
error: function(response) {
grecaptcha.reset();
$("#con_msg").html('Try Again...');
}
});
}
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>

回答11:

If you're using WordPress, make sure you don't have another reCaptcha plugin installed...that was the issue for me.