Две или более reCaptcha на одной странице. Несколько рекапч на странице

Нет картинки Как заставить работать 2 рекапчи на одной странице.

Серверная сторона нас в этой ситуации не интересует, с ней проблем нет, так что сразу переходим к клиентской стороне. Для начала добавим на страницу api самого  reCaptcha (можно HEAD, можно в BODY, на ваше усмотрение).

Теперь добавим в наши формы блоки div для captcha (не забываем обязательно указывать у блоков уникальный id):

<form action="?" method="POST">
...
<div id="recaptcha1"></div>
<br>
<input type="submit" value="Submit">
</form>

...

<form action="?" method="POST">
...
<div id="recaptcha2"></div>
<br>
<input type="submit" value="Submit">
</form>
Ну а теперь сам javascript для создания форм:
 
<script type="text/javascript">
var onloadCallback = function() {
mysitekey = 'your_site_key';
grecaptcha.render('recaptcha1', {
'sitekey' : mysitekey
});
grecaptcha.render('recaptcha2', {
'sitekey' : mysitekey,
'theme' : 'dark', //default - light
'type' : 'audio', //default - image
'size' : 'compact', //default - normal
'tabindex' : 1, //default - 0
'callback' : , //function on success
'expired-callback' : //function when response expires
});
};
</script>
или проще, если без параметров:
 
var onloadCallback = function() {
    grecaptcha.render('recaptcha1', {'sitekey' : 'your_site_key'});
    grecaptcha.render('recaptcha2', {'sitekey' : 'your_site_key'});
};
 
Не забываем заменить  your_site_key на ваш секретный ключ выданный Google !
 
По аналогии можно сделать и на большее количество форм.

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:

Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.