Recapcha V3 不适用于具有多种表单的页面

Question

我对 Google Recaptcha V3 有问题。Id 确实适用于单个表单，但如果页面中的表单超过 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>

请帮忙！提前致谢！

Answer 1

问题似乎是因为getElementById调用只解析recaptcha_response第一种形式的输入元素，而不是第二种形式。一个简单的解决方法是将recaptcha_response每种形式中元素的 id 更改为不同的东西，比如recaptchaResponse1和recaptchaResponse2。那么用于设置令牌的 Javascript 代码可能是：grecaptcha.ready(function () {&nbsp; grecaptcha.execute('key2', { action: 'contact' }).then(function (token) {&nbsp; &nbsp; document.getElementById('recaptchaResponse1').value = token;&nbsp; &nbsp; document.getElementById('recaptchaResponse2').value = token;&nbsp; });});一种更易于维护且适用于任意数量表单的更好方法是为recaptcha_reponse输入指定一个类名，并使用该querySelectorAll函数获取具有给定类名的所有输入并更新它们。<form class="user" action="" method="post" name="form1" id="form1">&nbsp; &nbsp; <input type="hidden" name="source" value="form1">&nbsp; &nbsp; <button type="submit" class="btn btn-success">Submit 1</button>&nbsp; &nbsp; <input type="hidden" name="recaptcha_response" class="recaptchaResponse"></form><form class="user" action="" method="post" name="form2" id="form2">&nbsp; &nbsp; <input type="hidden" name="source" value="form2">&nbsp; &nbsp; <button type="submit" class="btn btn-success">Submit 2</button>&nbsp; &nbsp; <input type="hidden" name="recaptcha_response" class="recaptchaResponse"></form>grecaptcha&nbsp; .execute("key", {&nbsp; &nbsp; action: "contact"&nbsp; })&nbsp; .then(function(token) {&nbsp; &nbsp; document&nbsp; &nbsp; &nbsp; .querySelectorAll(".recaptchaResponse")&nbsp; &nbsp; &nbsp; .forEach(elem => (elem.value = token))&nbsp; &nbsp; ;&nbsp; });希望有帮助:)

Answer 2

删除 id 标签并仅使用名称标签。grecaptcha.ready(function () {&nbsp; &nbsp; grecaptcha.execute({publicKey}, {action: 'forms'}).then(function (token) {&nbsp; &nbsp; &nbsp; &nbsp; var recaptchaElements = document.getElementsByName('recaptcha');&nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < recaptchaElements.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; recaptchaElements[i].value = token;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });});