How to Reload ReCaptcha using JavaScript?

JavascriptRecaptcha

Javascript Problem Overview

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.

Javascript Solutions

Solution 1 - Javascript

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.)

Solution 2 - Javascript

If you are using version 1

Recaptcha.reload();

If you are using version 2

grecaptcha.reset();

Solution 3 - Javascript

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

Solution 4 - Javascript

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)

Solution 5 - Javascript

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 6 - Javascript

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.

Solution 7 - Javascript

For AngularJS users:

$window.grecaptcha.reset();

Solution 8 - Javascript

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>
Categories
Recommended Javascript Solutions
Recommended Recaptcha Solutions

Previous Solution:

How is Racket different from Scheme?

SchemeLispRacket

Next Solution:

How can I improve my paw detection?

PythonImage Processing

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionahmet alp balkanView Question on Stackoverflow
Solution 1 - Javascriptahmet alp balkanView Answer on Stackoverflow
Solution 2 - JavascriptDasunView Answer on Stackoverflow
Solution 3 - JavascriptabhiagNitkView Answer on Stackoverflow
Solution 4 - JavascriptKutaliaView Answer on Stackoverflow
Solution 5 - JavascriptAlxVallejoView Answer on Stackoverflow
Solution 6 - JavascriptTimView Answer on Stackoverflow
Solution 7 - JavascriptMarcelo C.View Answer on Stackoverflow
Solution 8 - JavascriptSara KhanView Answer on Stackoverflow