How can we use several google recaptchas in the same page?

Question

When i put

<script>
  var renderCaptchas = function() {
    grecaptcha.render(this, {
      'sitekey' : {{ google_recaptcha_site_key }}
    });
  };

  var onloadCaptchaCallback = function () {
    Array.prototype.forEach.call(document.querySelectorAll('.g-recaptcha'),
     renderCaptchas);
  };
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCaptchaCallback&render=explicit" async defer></script>

I have this error :

reCAPTCHA couldn't find user-provided function: onloadCaptchaCallback

The function is yet well defined ... If i remove

grecaptcha.render(this, {
  'sitekey' : {{ google_recaptcha_site_key }}
});

Then it finds the callback ... I use the Google ReCaptcha v2, with the checkbox "mode".

There is multiple responses of similar question here : https://stackoverflow.com/questions/1241947/how-do-i-show-multiple-recaptchas-on-a-single-page — Shim-Sao, Nov 24 '18 at 11:05
If you use JQuery, you should add : $(document).ready(function() { ... }); — Shim-Sao, Nov 24 '18 at 11:09
If you use prototype : document.observe("dom:ready", function() { ... }); — Shim-Sao, Nov 24 '18 at 11:15
I have already tested the DOMContentLoaded event with no success. The link provided suggests to use javascript and explicit rendering ...and it is what i am doing here. — lionelp, Nov 24 '18 at 11:21

Shim-Sao · Answer 1 · 2018-11-24T16:53:25.730

1

There is something strange in your loop for me and grecaptcha.render(this !? this = renderCaptchas ... no !? So the element you want to render is not good because it is not a valid html container.

<script>
var renderCaptchas = function(element) {
    grecaptcha.render(element, {
      'sitekey' : 'google_recaptcha_site_key'
    });
  };
</script>

or something like :

<script>
    var onloadCaptchaCallback = function () {
        [].forEach.call(document.querySelectorAll('.g-recaptcha'), function(element){
            grecaptcha.render(element, {
                'sitekey' : 'google_recaptcha_site_key'
            });
         }
     });
};
</script>

How to loop over document.querySelectorAll :

How to loop through selected elements with document.querySelectorAll

edited Nov 24 '18 at 16:53

answered Nov 24 '18 at 12:02

Shim-Sao

2,026
2
18
23

My code is exactly like your second example, just that i put the function in a more shallow way... – lionelp Nov 24 '18 at 15:40
I doubt "this" is the html container. Have you try the element as argument ? – Shim-Sao Nov 24 '18 at 16:15
console.log(this) and console.log(element) to this who is right – Shim-Sao Nov 24 '18 at 16:22
I tested element that was indeed a good point but that does not solve the main error. – lionelp Nov 24 '18 at 16:39
'your_site_key' and not {{ your_site_key }}, {{ should be ' => quote or double quote – Shim-Sao Nov 25 '18 at 00:35
In fact, i am using Twig so i need the {{ }}, but by chance you are partially right and focused me on this line. I should wrote : 'sitekey' : '{{google_recaptcha_site_key}}'. So thanks :) Stupid errors -_- – lionelp Nov 25 '18 at 10:23
I'm pleased if I can help to go on the right way :) – Shim-Sao Nov 25 '18 at 12:50

How can we use several google recaptchas in the same page?

1 Answers1