CODEWITHSUNDEEP
recaptcha
wmac
wmac

Reputation: 1063

reCaptcha checkbox spins for 15 seconds, then remains unchecked

I have put reCaptcha on a website. reCaptcha loads without problem but as soon as you click the checkbox, it spins for 15 seconds and remains unchecked. It also does not make any background connection (POST) to google to evaluate the click (should happen).

reCaptcha spinning without success

I have added this to the header of the website and this is the first script that is loaded.

<script src='https://www.google.com/recaptcha/api.js'></script>

I also added this field to my login form:

<div class="g-recaptcha" data-sitekey="6LcGv3MUAAAAALdBp38mExUgAAAAAAH_IX522Gr" style="transform:scale(0.75);transform-origin:100% 0;"></div>

There is no network activity (in the network tab of developer tools) when I click the checkbox and the only thing I see in the console tab are 2 strange errors from reCaptcha:

Developer tools console

I put a bare html form with above modifications on the same domain and server and the reCaptcha works. So I guess this is some kind of conflict with my large existing code (both html and javascript). How can I find or solve the conflict?

Upvotes: 1

Views: 3138

Answers (3)

stephen infanto
stephen infanto

Reputation: 1

In my case also this was due to mootools. removing mootools is not a option. so, any work around will be helpful

Upvotes: 0

Alex
Alex

Reputation: 132

I've had the same issue, an infinite spinning loader. Apparently, a JS library was causing this. https://mootools.net/

Upvotes: 2

davidm_uk
davidm_uk

Reputation: 768

I solved this on my site by switching to explicit rendering:

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

...

<div id="recaptcha"></div>

I use recaptchaOnLoad to reset a global recaptcha_rendered variable, because my recaptcha is on the second page of a jQuery Steps wizard, which I think is what was confusing automatic rendering. I probably don't need this function (also referenced in the script tag used to load the recaptcha API above), but it doesn't do any harm:

function recaptchaOnLoad() {
    recaptcha_rendered = false;
}

When the wizard switches to the page containing the recaptcha, I reset or render it with:

if( recaptcha_rendered ) {
    grecaptcha.reset();
} else {
    grecaptcha.render( 'recaptcha', {
        'sitekey': 'my-site-key',
        'callback': 'recaptchaOnData',
        'expired-callback': 'recaptchaOnExpiry'
    } );
    recaptcha_rendered = true;
}

It now works every time.

Upvotes: 1

Related Questions