I can't put more than two reCAPTCHAs

Question

I have one page with two reCAPTCHAs. I've followed the examples I found around and did like this:

<script>
var CaptchaCallback = function(){
    grecaptcha.render('captcha_associe-se_1', {'sitekey' : 'Key'});
    grecaptcha.render('captcha_associe-se_2', {'sitekey' : 'Key'});   
};
</script>
<script src='https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit' async defer></script>

Then, in the forms:

    ...
    <div style="margin-left: 145px; float: left;"><div id="captcha_associe-se_1"></div></div>
</form>

and

    ...
    <div style="margin-left: 145px; float: left;"><div id="captcha_associe-se_2"></div></div>
</form>

Problem is I need more two reCAPTCHAs within another page, but by adding more render functions simply does not work, and no error is shown. Besides, I have a message in console saying the placeholder does not exist, and it points to the first line inside of the CaptchaCallback, but everything works correctly.

Uncaught Error: ReCAPTCHA placeholder element does not exist

My guess the "other pages" IDs and the ID passed to .render() don't match. Where is the code for the "other page"? — Eric J., Feb 10 '16 at 16:22
Have you tried the solution outlined here? http://stackoverflow.com/a/28126317/2613040 — Tennyson H, Feb 10 '16 at 16:23
They match. I've copied and pasted from the header file. The code is pretty much the same as the above, with the `id` just like the third `render` method. — fermoga, Feb 10 '16 at 16:23
What in the world do you need so many reCaptchas for? I can't even imagine a use case for 2 on the same page. — linuxdan, Feb 10 '16 at 16:24
@TennysonH I have. This is the exactly same example I based on. — fermoga, Feb 10 '16 at 16:24
@linuxdan Two in the same page because there are two different types for `person`. I have two forms like this, but the one I've shown in my question worked. — fermoga, Feb 10 '16 at 16:26
Could you put your Recaptcha Javascript inside $(document).ready(), I feel like its running before your divs are created on the page? — Dylan, Feb 10 '16 at 16:27
@Dylan Yes, I did. Tried to move to footer, my `main.js`, but it only worked right before the import of the `recaptchalib.js`, without `document ready`, in `header` file, or in `footer`. — fermoga, Feb 10 '16 at 16:34

score 0 · Answer 1 · answered Feb 10 '16 at 16:49

Solved by creating another callback function and loading after window.onload

<script>
var CaptchaCallback = function() {
    grecaptcha.render('captcha_associe-se_1', {'sitekey' : 'KEY'});
    grecaptcha.render('captcha_associe-se_2', {'sitekey' : 'KEY'});   
};

var CaptchaCallback2 = function() {
    grecaptcha.render('captcha_inscricao_1', {'sitekey' : 'KEY'});
    grecaptcha.render('captcha_inscricao_2', {'sitekey' : 'KEY'});    
};
</script>
<script src='https://www.google.com/recaptcha/api.js?render=explicit' async defer></script>
<script> window.onload = CaptchaCallback; window.onload = CaptchaCallback2; </script>

Not sure if the best, but it seems something stupid happens when I try to add more than 2 in a single callback function, so, just created a new one.

I can't put more than two reCAPTCHAs

1 Answers1