3

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.

3 Answers 3

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

Sign up to request clarification or add additional context in comments.

Comments

1

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> 

Comments

0

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"); } }); } } }; 

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.