CODEWITHSUNDEEP
javascriptrecaptcha
ahmet alp balkan
ahmet alp balkan

Reputation: 45196

How to Reload ReCaptcha using JavaScript?

I have a signup form with AJAX so that I want to refresh Recaptcha image anytime an error is occured (i.e. username already in use).

I am looking for a code compatible with ReCaptcha to reload it using JavaScript.

Upvotes: 213

Views: 234455

Answers (9)

Phil
Phil

Reputation: 1061

If you have multiple recaptcha widgets on the same page then the reset() method will default to the first, unless the widgetId is specified. The API doesn't offer a simple or reliable way to find the widget Id in code. A solution to this is to load widgets explicitly and store the widget Id in a data attribute

<script src="https://www.google.com/recaptcha/api.js?onload=recaptchaLoaded&render=explicit"></script>

<script>
    function recaptchaLoaded() {
    
        document.querySelectorAll('.g-recaptcha').forEach((el, i) => {
            var widgetId = grecaptcha.render(el);
            el.setAttribute('data-grecaptcha-id', widgetId);
        });
    
    }

    document.getElementById("mybutton").addEventListener("click", (event) => {
        var widgetId = document.getElementById("mycaptcha").getAttribute('data-grecaptcha-id');
        grecaptcha.reset(widgetId);
    });

</script>

Note that the script URL must include render=explicit and the name of your onload callback method

Upvotes: 0

abhiagNitk
abhiagNitk

Reputation: 1067

Important: Version 1.0 of the reCAPTCHA API is no longer supported. Please upgrade to Version 2.0.

You can use grecaptcha.reset(); to reset the captcha.

Source: https://developers.google.com/recaptcha/docs/display#js_api

Upvotes: 53

ahmet alp balkan
ahmet alp balkan

Reputation: 45196

For reCaptcha v2, use:

grecaptcha.reset();

If you're using reCaptcha v1 (probably not): 

Recaptcha.reload();

This will do if there is an already loaded Recaptcha on the window.

(Updated based on @SebiH's comment below.)

Upvotes: 429

Marcelo C.
Marcelo C.

Reputation: 3972

For AngularJS users:

$window.grecaptcha.reset();

Upvotes: 3

Kutalia
Kutalia

Reputation: 559

grecaptcha.reset(opt_widget_id)

Resets the reCAPTCHA widget. An optional widget id can be passed, otherwise the function resets the first widget created. (from Google's web page)

Upvotes: 13

Sara Khan
Sara Khan

Reputation: 335

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>

Upvotes: 1

Dasun
Dasun

Reputation: 3294

If you are using version 1

Recaptcha.reload();

If you are using version 2

grecaptcha.reset();

Upvotes: 72

AlxVallejo
AlxVallejo

Reputation: 3219

Or you could just simulate a click on the refresh button

// If recaptcha object exists, refresh it
    if (typeof Recaptcha != "undefined") {
      jQuery('#recaptcha_reload').click();
    }

Upvotes: 9

Tim
Tim

Reputation: 9489

Try this 

<script type="text/javascript" src="//www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
          function showRecaptcha() {
            Recaptcha.create("YOURPUBLICKEY", 'captchadiv', {
              theme: 'red',
              callback: Recaptcha.focus_response_field
            });
          }
 </script>

<div id="captchadiv"></div>

If you calll showRecaptcha the captchadiv will be populated with a new recaptcha instance.

Upvotes: 7

Related Questions