Google recaptcha callback не работает с несколькими reCAPTCHA

Question

У меня есть несколько Google captcha на странице. Код:

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

На странице есть несколько блоков для рекапчи:

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

Все рекапчи прекрасно делают, все с темной темой, все же проверки работы, но функция callback не дозвонились ,

Когда я пробовал одиночный reCAPTCHA с атрибутом обратного вызова данных, он работал хорошо.

Answer 1

Я столкнулся с той же проблемой. После проверки документации я нашел свою проблему. Попробуйте удалить одинарные кавычки вокруг имени вашей функции. Как это:

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

Может быть, это поможет кому-то еще, а :)

Answer 2

шаги для реализации multimple ReCaptcha с помощью метода обратного вызова для отключения кнопки отправки

1) Добавить ссылку

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

2) Добавить код, который отобразит виджет captcha

<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) Добавить метод, чтобы удалить отключить свойство на кнопку отправки

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

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

} 

4) Добавьте виджет внутри формы

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