Google reCapcha 2.0 — при нажатии на кнопку «Отправить» что за ошибку выдает консоль?

Question

Александр AS @as_viper

Начинающий веб-разработчик

JavaScript

Google reCapcha 2.0 — при нажатии на кнопку «Отправить» что за ошибку выдает консоль?

Всем привет!
Поставил на форму гугловскую капчу. Отправку формы выполняю через Ajax.
Всё работает, но есть один момент, почему в консоли выдает ошибку и что она означает?

Скрипт который я использую:

$(document).on("submit", ".popup form", function (e) {
        e.preventDefault();
        var m_method = $(this).attr('method');
        var m_action = $(this).attr('action');
        var m_data = $(this).serialize();
        $.ajax({
            type: m_method,
            url: m_action,
            data: m_data,
            resetForm: 'true',
            success: function (result) {
                $(".popup-block").html(result);
				grecaptcha.render('captcha', {
					'sitekey' : 'ключ сайта'
				});
            }
        });
    });

Спасибо!

Вопрос задан более трёх лет назад
102 просмотра

Комментировать

Подписаться 1 Простой Комментировать

Пригласить эксперта

Ответы на вопрос 1

8 комментариев

Александр AS @as_viper Автор вопроса

Извините за глупый вопрос, но этот элемент является - JS элементом, я правильно вас понял?

Написано более трёх лет назад
Дмитрий Гололобов @dGololobov
Вот ваш код:

grecaptcha.render('captcha', { 'sitekey' : 'ключ сайта' })

Первым параметром стоит элемент, в который будет загружена капча. Его id судя по вашему коду = captcha

Покажите хтмл код вашего блока попап, чтобыувидеть что там к чему, если сами не разберетесь
Написано более трёх лет назад

Дмитрий Гололобов @dGololobov

Александр AS, вот код примера с сайта рекапчи. Там четко показано что id элемента, куда грузится капча называется html_element

Дальше по коду видно, что этот блок пустой. У вас должно быть также

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Написано более трёх лет назад

Александр AS @as_viper Автор вопроса

Дмитрий Гололобов, вот:

<div class="popup-form-field">
			<script src='https://www.google.com/recaptcha/api.js'></script>
			<div class="captha-block" id="captcha">
				<div class="g-recaptcha" data-sitekey="ключ"></div>
				
			</div>
		</div>

Написано более трёх лет назад

Дмитрий Гололобов @dGololobov
Александр AS, Ну вот же!
Исправьте на:

<div class="popup-form-field"> <script src='https://www.google.com/recaptcha/api.js'></script> <div class="captha-block" id="captcha"></div> </div>
Написано более трёх лет назад
Александр AS @as_viper Автор вопроса
Дмитрий Гололобов, интересно..
если я убираю:
<div class="g-recaptcha" data-sitekey="ключ"></div>

То капча пропадает
Написано более трёх лет назад
Дмитрий Гололобов @dGololobov

Александр AS, У вас в джсе еще ошибка. Капча грузится после того как вы отправили данные формы. А нужно наоборот.

Написано более трёх лет назад

Александр AS @as_viper Автор вопроса

Дмитрий Гололобов,
исправил но никаких изменений... капчи нету
вот новый js код:

var onloadCallback = function() {
		grecaptcha.render('captcha', {
			'sitekey' : 'ключ'
		});
	};

    $(document).on("submit", ".popup form", function (e) {
        e.preventDefault();
        var m_method = $(this).attr('method');
        var m_action = $(this).attr('action');
        var m_data = $(this).serialize();
        $.ajax({
            type: m_method,
            url: m_action,
            data: m_data,
            resetForm: 'true',
            success: function (result) {
                $(".popup-block").html(result);
            }
        });
    });

Написано более трёх лет назад

Ваш ответ на вопрос