Question

56

How to add multiple invisible recaptcha in single page?

rated 0 times [ 61] [ 5] / answers: 1 / hits: 25536 / 7 Years ago, wed, april 5, 2017, 12:00:00

I have added two invisible recaptcha divs but when i saw the code in inspect element then only one invisible recaptcha added in my single page.
My code is:

 <div id=captcha1 class=g-recaptcha

      data-sitekey=your_site_key

      data-callback=onSubmit

      data-size=invisible></div>

<div id=captcha2 class=g-recaptcha

      data-sitekey=your_site_key

      data-callback=onSubmit

     ></div>

Get reference from
Programmatically invoke recaptcha

Can you help me what am i doing wrong?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

moriah

Add To Favorites

Follow

Total Points: 201

Total Questions: 100

Total Answers: 82

Location: Tuvalu

Member since Sun, Sep 4, 2022

2 Years ago

answered 7 Years ago zariahdiamondz · Accepted Answer

Below a more reliable solution to Peter and Alessandro answers when nesting elements.

<script>

$(.g-recaptcha).each(function() {

    var object = $(this);

    grecaptcha.render(object.attr(id), {

        sitekey : 6LdwRC0UAAAAAK0hjA8O4y1tViGPk9ypXEH_LU22,

        callback : function(token) {

            object.parents('form').find(.g-recaptcha-response).val(token);

            object.parents('form').submit();

        }

    });

});

</script>



<form>

    <input type=text name=example/>

    <button id=captcha1 class=g-recaptcha>submit form 1</button>

</form>



<form>

    <input type=text name=example/>

    <button id=captcha2 class=g-recaptcha>submit form 2</button>

</form>



<script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' async defer></script>