Recapcha V3 не работает на странице с несколькими формами - PullRequest
Новая
       18

Recapcha V3 не работает на странице с несколькими формами

0 голосов
/ 09 июня 2019

У меня проблема с Google Recaptcha V3. Идентификатор работает на одной форме, но работает только для первой формы, если на странице более 1 формы. Как заставить это работать для всех форм? Я знаю, что проблема с id="recaptchaResponse", но я не знаю, как это исправить! Там есть нелепые вопросы, но вы не можете найти решение.

Javascript: 

<script src="https://www.google.com/recaptcha/api.js?render=key1"></script>
<script>
    grecaptcha.ready(function () {
        grecaptcha.execute('key2', { action: 'contact' }).then(function (token) {
            var recaptchaResponse = document.getElementById('recaptchaResponse');
            recaptchaResponse.value = token;
        });
    });
</script>

Форма: 

<form class="user" action="" method="post" name="form1" id="form1">
    <input type="hidden" name="source" value="form1">

    <button type="submit" class="btn btn-success">Submit 1</button>

    <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
</form>

<form class="user" action="" method="post" name="form2" id="form2">
    <input type="hidden" name="source" value="form2">

    <button type="submit" class="btn btn-success">Submit 2</button>

    <input type="hidden" name="recaptcha_response" id="recaptchaResponse">
</form>

Пожалуйста, помогите! Заранее спасибо!

1 Ответ

1 голос
/ 11 июня 2019

Похоже, проблема в том, что вызов getElementById разрешает только элемент ввода recaptcha_response в первой форме, а не во второй.

Простым решением будет изменение идентификаторов recaptcha_response элементы в каждой форме к чему-то другому, скажем recaptchaResponse1 и recaptchaResponse2.Тогда код Javascript для установки токенов может быть: 

grecaptcha.ready(function () {
  grecaptcha.execute('key2', { action: 'contact' }).then(function (token) {
    document.getElementById('recaptchaResponse1').value = token;
    document.getElementById('recaptchaResponse2').value = token;
  });
});

. Лучший подход, который легче поддерживать и будет работать для любого числа форм, - это указать имя класса для входных данных recaptcha_reponse и использоватьquerySelectorAll функция для получения всех входных данных с заданным именем класса и их обновления. 

<form class="user" action="" method="post" name="form1" id="form1">
    <input type="hidden" name="source" value="form1">
    <button type="submit" class="btn btn-success">Submit 1</button>

    <input type="hidden" name="recaptcha_response" class="recaptchaResponse">
</form>

<form class="user" action="" method="post" name="form2" id="form2">
    <input type="hidden" name="source" value="form2">
    <button type="submit" class="btn btn-success">Submit 2</button>

    <input type="hidden" name="recaptcha_response" class="recaptchaResponse">
</form>

grecaptcha
  .execute("key", {
    action: "contact"
  })
  .then(function(token) {
    document
      .querySelectorAll(".recaptchaResponse")
      .forEach(elem => (elem.value = token))
    ;
  });

Надеюсь, это поможет:)

...