Google reCaptcha reset doesn't work

Question

I want to reset Google reCaptcha widget when I submit my form via AJAX and have some input errors or form is sent. I'm using multiple widgets on the same page so I render these widgets explicitly.

My HTML code:

<div class="g-recaptcha" id="recaptcha-1"></div>
<div class="g-recaptcha" id="recaptcha-2"></div>
...
<div class="g-recaptcha" id="recaptcha-20"></div>

Loading widget

<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit&hl=en" async defer></script>
<script>
    var reCaptchaCallback = function() {
        var elements = document.getElementsByClassName('g-recaptcha');
        for (var i = 0; i < elements.length; i++) {
            var id = elements[i].getAttribute('id');
            grecaptcha.render(id, {
                'sitekey' : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
            });
        }
    };
</script>

After submit form:

var id = $('.g-recaptcha', form).attr('id');
grecaptcha.reset(id);

Form is the instance of the submitted form.

Everything works fine when form is fill correctly. But reCaptcha doesn't reset or reload. It try this grecaptcha.reset() but no results.

Any idea?

Answer 1

The grecaptcha.reset() method accepts an optional widget_id parameter, and defaults to the first widget created if unspecified. A widget_id is returned from the grecaptcha.render() method for each widget created. So you need to store this id, and use it to reset that specific widget:

var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);

See here.

Answer 2

You are passing the wrong id.

$('.g-recaptcha', form).attr('id');

Your selector will capture all 20 reCaptcha widget, but only return a single DOM id (the first reCaptcha). So your code is actually resetting the first recaptcha.

Answer 3

Just edited your code to create a dynamic widget.

<script>
    var reCaptchaCallback = function() {
        var elements = document.getElementsByClassName('g-recaptcha');
        for (var i = 0; i < elements.length; i++) {                
            widgetId+i = grecaptcha.render('recaptcha-'+i, {
                'sitekey' : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
            });
        }
    };
</script>

And after you have successfully completed the above task, change in the AJAX success: response

grecaptcha.reset(widgetId+id);

Here the id would be the same that is generated from the below for Loop.

Answer 4

I have two google captcha in same page, two different form

<form id="form1">    
<input type="text" name="form1-input">
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div>
</form>

and

<form id="form2">    
<input type="text" name="form2-input">
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXXXXXXXX"></div>
</form>

You can reset first captcha by

 grecaptcha.reset(); or grecaptcha.reset(0);

And Second Captcha by index (1)

grecaptcha.reset(1);

Answer 5

I had an issue where there were multiple recaptchas on the page, some were hidden. In this case I had to loop through all of them and reset them like this:

                var count = 0;
                $(".g-recaptcha").each(function () {
                    grecaptcha.reset(count);
                    count++;
                });