我对Google Recaptcha V3有问题。 Id适用于单个表单,但如果页面中有多个表单,则仅适用于第一个表单。
如何使其适用于所有形式?
我知道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>
请帮助!预先感谢!
答案 0 :(得分:1)
问题似乎是因为getElementById
调用仅解析第一种形式的recaptcha_response
输入元素,而不是第二种形式。
一个简单的解决方法是将每种形式的recaptcha_response
元素的ID更改为不同的名称,例如recaptchaResponse1
和recaptchaResponse2
。然后,用于设置令牌的Javascript代码可能是:
grecaptcha.ready(function () {
grecaptcha.execute('key2', { action: 'contact' }).then(function (token) {
document.getElementById('recaptchaResponse1').value = token;
document.getElementById('recaptchaResponse2').value = token;
});
});
一种更易于维护且适用于多种形式的更好方法是为recaptcha_reponse
输入指定类名,并使用querySelectorAll
函数获取给定条件下的所有输入类名并进行更新。
<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" class="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" class="recaptchaResponse">
</form>
grecaptcha
.execute("key", {
action: "contact"
})
.then(function(token) {
document
.querySelectorAll(".recaptchaResponse")
.forEach(elem => (elem.value = token))
;
});
希望有帮助:)
答案 1 :(得分:1)
删除id标签,仅使用名称标签。
grecaptcha.ready(function () {
grecaptcha.execute({publicKey}, {action: 'forms'}).then(function (token) {
var recaptchaElements = document.getElementsByName('recaptcha');
for (var i = 0; i < recaptchaElements.length; i++) {
recaptchaElements[i].value = token;
}
});
});