How to Reload ReCaptcha using JavaScript?

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.

Solutions/Answers:

Solution 1:

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/verify#api-request

Solution 2:

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

Recaptcha.reload();

For new version of reCaptcha v2, use:

grecaptcha.reset();

if there is an already loaded Recaptcha on the window.

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

Solution 3:

If you are using version 1

Recaptcha.reload();

If you are using version 2

grecaptcha.reset();

Solution 4:

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();
    }

Solution 5:

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)

Related:  Adding external JavaScript file to Magento

Solution 6:

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.