Google recaptcha 콜백이 여러 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> 

여러 블록 reCAPTCHA를 거기에 있습니다

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

모든 reCAPTCHA를의 잘 렌더링, 어두운 테마로 모두가 모든 작업을 확인하는,하지만 은 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

단계 참조를 해제 용)

1 버튼을 제출 콜백 방법 multimple reCAPTCHA를 구현 추가하기

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

2) 보안 문자 위젯을 렌더링하는 코드를 추가하십시오.

<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) 형태

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

내부의 위젯을 추가) 제출 버튼

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

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

} 

4 비활성화 속성을 제거하는 방법을 추가