Google recaptcha callback not working with multiple reCAPTCHA

Question

I have multiple google captchas on page. Code:

<script>
        var qqqq =function(captcha_response){
            console.log('?')
        }
        var CaptchaCallback = function(){
            $('.g-recaptcha').each(function(index, el) {
                grecaptcha.render(el, {'sitekey' : '{{ recaptcha_key}}', 'callback': 'qqqq', 'theme': 'dark'});
            });
        };
    </script>
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>

On the page there are several blocks for reCAPTCHA:

<div class="g-recaptcha"></div>

All reCAPTCHA's render well, all with dark theme, all do verifying work, but the callback function does not get called.

When I tried single reCAPTCHA with data-callback attribute, it worked well.

Answer 1

I was facing the same issue. After checking the documentation again I found my problem. Try to remove the single quotation marks around your function name. Like this:

<script>
    var qqqq =function(captcha_response){
        console.log('?')
    }
    var CaptchaCallback = function(){
        $('.g-recaptcha').each(function(index, el) {
            grecaptcha.render(el, {'sitekey' : '{{ recaptcha_key}}', 'callback': qqqq });
        });
    };
</script>

Maybe this helps someone else as well :)

Answer 2

Steps to implement multimple recaptcha with a callback method for disable the submit button

1) Add the reference

 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

2) Add the Code that will render the captcha widget

 <script>
            var CaptchaCallback = function () {
                grecaptcha.render('RecaptchaField1', { 'sitekey': 'xxx', callback: 'recaptchaCallback1'});
                grecaptcha.render('RecaptchaField2', { 'sitekey': 'xxx', callback: 'recaptchaCallback2' });
                grecaptcha.render('RecaptchaField3', { 'sitekey': 'xxx', callback: 'recaptchaCallback3' });
            };
 </script>

3) Add the method to remove the disable property on the submit button

 $('#GetHelpButton').prop('disabled', true);

 function recaptchaCallback1()
 {
      $('#GetHelpButton').prop('disabled', false);

 }

4) Add the widget inside a form

<form id="formContact" method="post" class="login-form margin-clear" action="Landing/SendContactForm">
<div class="form-group has-feedback">
 <label class="control-label">Correo electronico</label>
 <input name="EmailContact" value="" id="EmailContact" type="text" class="form-control" placeholder="">
<i class="fa fa-envelope form-control-feedback"></i>
</div>
<div id="RecaptchaField1"></div>
 <button   id="GetHelpButton" type="submit" data-sitekey="xxxx" class="btn btn-info col-md-12  g-recaptcha">Send</button>

Answer 3

Try setting a unique ID for each div and then use a for loop to iterate through them. Something like this:

window.onloadCallback = function() {
    var captcha = ['recaptcha1' ,'recaptcha2', 'recaptcha3']; //put your IDs here
    for(var x = 0; x < captcha.length; x++){
        if($('#'+captcha[x]).length){
            grecaptcha.render(captcha[x], {
                'sitekey' : '{{ recaptcha_key}}',
                'theme' : 'dark',
                'callback': function() {
                    console.log("Woof");
                }
            });
        }
    }
};