如何在单页中添加多个不可见的recaptcha？

Question

我添加了两个不可见的recaptcha div,但是当我在inspect元素中看到代码时,我的单页中只添加了一个不可见的recaptcha.我的代码是:

 <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>

从Programmatically调用recaptcha获取参考

你能帮我解决我做错的事吗？

Answer 1

下面是一个更可靠的解决方案,彼得和亚历山德罗在嵌套元素时回答.

<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>

Answer 2

有同样的问题。经过一番困惑后，我明白了。

使用了Alessandro提供的想法，并使其成功后将自动提交表单。

<script type="text/javascript">
    var onloadCallback = function() {
        $(".g-recaptcha").each(function() {
            var el = $(this);
            grecaptcha.render($(el).attr("id"), {
                "sitekey" : SITE_KEY,
                "callback" : function(token) {
                    $(el).parent().find(".g-recaptcha-response").val(token);
                    $(el).parent().submit();
                }
            });
        });
    };
</script>

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