ReCaptcha：当验证码发送时如何自动提交表单

Question

我想使用ReCaptcha在页面上加载一些额外数据。当输入ReCaptcha时，我希望自动提交表单，这样我就不需要额外的提交按钮了。问题是recaptcha将其内容加载到iframe中，所以有点困难。

目前我有这个表单：

<form action="javascript:getInfo(grecaptcha.getResponse(widget1));" >
      <div id="captcha"></div>
      <br>
      <input type="submit" value="Submit">
</form>

我该如何在 recaptcha 提交时添加类似事件监听器的东西，以提交外部表单？

- Mario Groß

---

你使用的是哪个版本的reCAPTCHA？ - colecmc

Answer 1

这听起来是一种有趣的技术。它能减少用户的点击和按键次数。以下是实现方法，通过监听成功的验证码响应，您可以跟进所需的操作。这里有一个示例和一些文档。https://developers.google.com/recaptcha/docs/display#example

var RC2KEY = 'sitekey';

function reCaptchaVerify(response) {
  if (response === document.querySelector('.g-recaptcha-response').value) {
    document.forms['form-name'].submit();
  }
}

function reCaptchaExpired() {
  /* do something when it expires */
}

function reCaptchaCallback() {
  grecaptcha.render('id', {
    'sitekey': RC2KEY,
    'callback': reCaptchaVerify,
    'expired-callback': reCaptchaExpired
  });
}

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

- colecmc

---

谢谢！这正是我所需要的。 - Mario Groß

这段代码片段不再起作用了。你能否更新一下它，我现在遇到了这个无法工作的答案。 - thesecretmaster

我很乐意提供帮助。你遇到了什么问题？ - colecmc

对我来说运行良好。我的表单操作设置为 action="?" 而不是提问者在问题中的设置。同时确保您在渲染方法中的 'id' 设置为包含元素的 ID 属性。 - Tech Savant

Answer 2

使用#代替?

?用于开始查询字符串，会影响method=GET类型的响应。而#是锚点符号，可以正常工作。

- Josh