CODEWITHSUNDEEP
javascriptjquerygoogle-chromerecaptcha
user4066420
user4066420

Reputation:

reference error: grecaptcha is undefined in chrome

I have two captcha on same form. One on submit and other on a modal which will open after form submit. So I render it after reading many answer from here. Now it is working fine with mozilla but giving reference error in chrome.

My google api is: 

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

Then my code renders this in java script:

$('.g-recaptcha').each(function(index, el) {
        widgetId = grecaptcha.render(el, {'sitekey' : 'My-SITE-KEY'});
});

My html read like this

<div id="user_recaptcha" class="reCaptcha">
    <div id="e_Captcha" class="g-recaptcha" data-sitekey="<?php echo SITE_KEY; ?>" data-callback="recaptchaCallbackEvent"></div>
</div>

I declare widgetId at the top of my js.

Upvotes: 1

Views: 10947

Answers (1)

Rahul Gupta
Rahul Gupta

Reputation: 994

Recaptcha has a onload callback that will run once recaptcha is loaded. Place your code inside that callback function.

https://developers.google.com/recaptcha/docs/display

//call this function in your js
function onloadCallback() {
    $('.g-recaptcha').each(function(index, el) {
        widgetId = grecaptcha.render(el, {'sitekey' : 'My-SITE-KEY'});
    });
}

//load this script before your js is loading
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"></script>
//your html is absolutely fine.

Upvotes: 4

Related Questions