Javascript 在不可见的reCaptcha回调中传递变量

我正在为我们的CMS应用程序中的一个网站创建一个表单，该应用程序使用了谷歌新的隐形reCaptcha

然而，我被困在如何使用reCaptcha的回调上

在使用验证码之前，代码非常简单：

HTML

<form>
    Form input fields here...
    <button id="a23k4l234lj2l-submit-button"></button>
</form>

Abayo

库具有验证特定表单并将数据发送到处理表单数据的脚本的函数

现在，我想将reCaptcha添加到表单中。 报告说：

1创建数据大小为“不可见”的div

<div class="g-recaptcha"
      data-sitekey="your_site_key"
      data-callback="onSubmit"
      data-size="invisible">
</div>

这是可行的，但是captcha的回调函数只给我一个响应代码来检查验证用户响应：

用户的响应g-recaptcha-response将作为回调函数的输入

响应只告诉我是否可以将请求发送到服务器

我需要的是submit按钮的位置、DOM元素或按钮的任何类型的标识，以便从与按钮匹配的表单中检索数据

使用以下代码，我无法从表单中检索数据并将其发送到服务器

$('#a23k4l234lj2l-submit-button').click(function (e) {
    e.preventDefault();
    grecaptcha.execute();
})

var onSubmit = function(response) {
    // var that cannot be defined, I don't have a DOM element anywhere?
    var that = ????
    if(Abayo.validate(that)) {
        Abayo.submit(that);
    }
}

问题

---

有没有办法在reCaptcha回调中获取DOM元素

您是否尝试过像这样动态设置

onSubmit

函数（将

div

标记保持与

data callback=“onSubmit”

相同）：

---

注意：我手边没有sitekey来验证此代码。因此，将此视为一种方法，而不是使用代码示例。

< p>您可以以编程方式创建ReCAPTCHA。

首先创建您的验证码div

<div id="myCaptcha" />

---

此处的更多信息

您不能将元素引用存储在提交按钮单击处理程序中的某个位置吗？这样你就可以在回调函数中读回它了？嗯，我可以，但我真的不想。任何存储的引用，如果不需要的话，都太多了。在我看来，这是万不得已的办法。足够公平；不管怎么说，这是一种变通方法，如果没有可能处理这个内部回调。在搜索了几个小时的答案后，我不得不放弃，并将表单ID存储在一个全局变量中，这样我就可以在回调中使用它。它调用函数，但出于某种奇怪的原因，它在执行grecaptcha调用之前调用函数。我猜Google

data callback

var没有将数据回调作为函数调用……好吧。在这种情况下，您可以尝试这种改变的方法。不要动态设置

数据回调

，让它保持静态，而是动态定义

onSubmit

函数。谢谢！！这是一个更好的解决方案。这是最近增加的吗？我以前找不到：）

uncaughtreferenceerror:grecaptcha未定义
$('#a23k4l234lj2l-submit-button').click(function (e) {
    e.preventDefault();
    grecaptcha.execute();
})

var onSubmit = function(response) {
    // var that cannot be defined, I don't have a DOM element anywhere?
    var that = ????
    if(Abayo.validate(that)) {
        Abayo.submit(that);
    }
}

$('#a23k4l234lj2l-submit-button').click(function (e) {
    e.preventDefault();
    var that = $(this);
    if(Abayo.validate(that)) {
      window.onSubmit = function(){ // defining onSubmit function dynamically here
        Abayo.submit(that); // you can access `that` here
      };
      grecaptcha.execute();
    }
})

<div id="myCaptcha" />

var that = $(this);
grecaptcha.render('myCaptcha', { 
  sitekey: 'xxx', 
  callback: function(token) {
    Abayo.submit(token, that) 
  }
});