Y
Y
Yuri Kalnin2019-02-06 20:54:21
1C-Bitrix
Yuri Kalnin, 2019-02-06 20:54:21

How to do grecaptcha.reset() for multiple captchas?

Connect google captcha script

<script class="g-recaptcha-script" src="https://www.google.com/recaptcha/api.js onload=onloadCallbackGoogleRecaptcha&render=explicit" async defer></script>

Insert html into form template
<div class="g-recaptcha-dynamic-initialized" id="g-recaptcha-dynamic-initialized1"></div>
еще одна форма
<div class="g-recaptcha-dynamic-initialized" id="g-recaptcha-dynamic-initialized2"></div>

There are several such forms and there will be several Google captchas.
Now the function is launched: onloadCallbackGoogleRecaptcha
var allCapthaForms = new Array()
 var onloadCallbackGoogleRecaptcha = function() {
            var wss = document.getElementsByClassName('g-recaptcha-dynamic-initialized')
            Array.prototype.filter.call(wss, function(ws, i){
                id = ws.getAttribute('id')
                w=grecaptcha.render(id, {
                    'sitekey' : '<?=RE_SITE_KEY?>',
                })
                allCapthaForms.push(w)
            });
        };

What it does: initializes google captcha and remembers the widget_id in the allCapthaForms array.
Then when the form is sent to the server, via ajax, the form is reloaded and the initialized captcha disappears, it needs to be initialized again, for this I wrote this:
var resetAllCapthaForms=function () {
            allCapthaForms.forEach(function (item) {
                grecaptcha.reset(item)
            })
            onloadCallbackGoogleRecaptcha()
        }

here I'm trying to loop through the allCapthaForms array and do a grecaptcha.reset(item) of each captcha and then start rendering again with the onloadCallbackGoogleRecaptcha() function
BUT! Everything works if the form is one! But if there is more than one form, then I get an error:
recaptcha__ru.js:596 Uncaught Error: reCAPTCHA has already been rendered in this element
at Object.$l [as render] (recaptcha__ru.js:596)
at (index):2393
at HTMLCollection.filter ()
at onloadCallbackGoogleRecaptcha ((index):2391)
at resetAllCapthaForms ((index):2403)
at :2:9
at Function.BX.evalGlobal (kernel_main_v1.js?1549274874311659:15)
at Function.BX.evalPack ( kernel_main_v1.js?1549274874311659:15)
at parent.bxcompajaxframeonload ((index):98)
at kernel_main_v1.js?1549274874311659:23
As I understand it, the grecaptcha.reset(item) function only resets the first form. The rest doesn't want to. On all sites they only write about this function and pass widget_id as a parameter to it, which I do. Or am I still missing something?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question