Double GRecaptcha in the same page doesn't work

[musaffa]

I've been trying to put more more than one GRepatcha in the same page. For this, I set separate ids for each <GRecaptcha ... /> and these id assignments work just fine. But the reference to this.element is lost in this anonymous callback function and always resolves to the element of the last <GRecaptcha />. SInce the grecaptcha.render is called on the same this.element multiple times, it leads to the error.

[sinankeskin]

Hey @musaffa multiple captcha in same page seems unnatural to me. All purpose to validate whether user is a real human being or robot. So, If you need 2nd or more captcha you must destroy the visible one and show the others but one at a time. That's the better approach I believe.

Closing for now. Feel free to reopen if you need.

Thanks for the comment.

[musaffa]

Consider this use case. This is the admin login page. Login form has a recaptcha. At the footer, we have email subscription section. It's a common practice to place email subscription at the footer. This footer is available in all the pages. Email subscription section of the footer also has a recaptcha. Thus we have two recaptchas in the same page. This login and footer components live on their own. They don't to know whether the other component is using a recaptcha.

Btw, multiple recaptchas in the same page is allowed by Recaptcha.

[sinankeskin]

Ok @musaffa got your point. I'll think about something. Thank you.