Haotic
@Haotic
Full stack web developer

Как сделать grecaptcha.reset() для нескольких каптч?

Подключаю скрипт гугл каптчи

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


В шаблон формы вставляю html
<div class="g-recaptcha-dynamic-initialized" id="g-recaptcha-dynamic-initialized1"></div>
еще одна форма
<div class="g-recaptcha-dynamic-initialized" id="g-recaptcha-dynamic-initialized2"></div>


Таких форм несколько и гугл каптч будет тоже несколько

Теперь запускается функция: 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)
            });
        };


Что она делает: инициализирует гугл каптчи и запоминает widget_id в массив allCapthaForms

Затем когда форма отправляется на сервер, через ajax, форма перезагружается и иницилазированная капча пропадает, ее нужно инициализировать заново, для этого написал это:

var resetAllCapthaForms=function () {
            allCapthaForms.forEach(function (item) {
                grecaptcha.reset(item)
            })
            onloadCallbackGoogleRecaptcha()
        }


здесь я пытаюсь перебрать массив allCapthaForms и сделать grecaptcha.reset(item) каждой капчти, а затем снова запустить рендеринг функцией onloadCallbackGoogleRecaptcha()

НО! Все работает если форма одна! Но если форм больше одной, то я получаю ошибку:

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

Как я понимаю функция grecaptcha.reset(item) сбрасывает только первую форму. А остальные не хочет. На всех сайтах только и пишут про эту функцию а в качестве параметра ей передавать widget_id что я и делаю. Или что то все таки упускаю?
  • Вопрос задан
  • 1128 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы