Javascript Google reCaptcha 重置不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30039035/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google reCaptcha reset doesn't work
提问by quarky
I want to reset Google reCaptcha widget when I submit my form via AJAX and have some input errors or form is sent. I'm using multiple widgets on the same page so I render these widgets explicitly.
当我通过 AJAX 提交表单并出现一些输入错误或发送表单时，我想重置 Google reCaptcha 小部件。我在同一页面上使用多个小部件，因此我显式呈现这些小部件。
My HTML code:
我的 HTML 代码：
<div class="g-recaptcha" id="recaptcha-1"></div>
<div class="g-recaptcha" id="recaptcha-2"></div>
...
<div class="g-recaptcha" id="recaptcha-20"></div>
Loading widget
加载小部件
<script src="https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit&hl=en" async defer></script>
<script>
var reCaptchaCallback = function() {
var elements = document.getElementsByClassName('g-recaptcha');
for (var i = 0; i < elements.length; i++) {
var id = elements[i].getAttribute('id');
grecaptcha.render(id, {
'sitekey' : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
});
}
};
</script>
After submit form:
提交表格后：
var id = $('.g-recaptcha', form).attr('id');
grecaptcha.reset(id);
Form is the instance of the submitted form.
表单是提交表单的实例。
Everything works fine when form is fill correctly. But reCaptcha doesn't reset or reload.
It try this grecaptcha.reset()but no results.
当表格正确填写时，一切正常。但 reCaptcha 不会重置或重新加载。它尝试这个grecaptcha.reset()但没有结果。
Any idea?
任何的想法？
回答by levi
The grecaptcha.reset()method accepts an optional widget_idparameter, and defaults to the first widget created if unspecified. A widget_idis returned from the grecaptcha.render()method for each widget created. So you need to store this id, and use it to reset that specific widget:
该grecaptcha.reset()方法接受一个可选widget_id参数，如果未指定，则默认为创建的第一个小部件。Awidget_id从grecaptcha.render()创建的每个小部件的方法返回。所以你需要存储这个 id，并用它来重置那个特定的小部件：
var widgetId = grecaptcha.render(container);
grecaptcha.reset(widgetId);
见这里。
回答by Jason
You are passing the wrong id.
您正在传递错误的 ID。
$('.g-recaptcha', form).attr('id');
$('.g-recaptcha', form).attr('id');
Your selector will capture all 20 reCaptcha widget, but only return a single DOM id (the first reCaptcha). So your code is actually resetting the first recaptcha.
您的选择器将捕获所有 20 个 reCaptcha 小部件，但只返回一个 DOM id（第一个 reCaptcha）。所以你的代码实际上是在重置第一个recaptcha。
回答by Viral Patel
Just edited your code to create a dynamic widget.
刚刚编辑了您的代码以创建动态小部件。
<script>
var reCaptchaCallback = function() {
var elements = document.getElementsByClassName('g-recaptcha');
for (var i = 0; i < elements.length; i++) {
widgetId+i = grecaptcha.render('recaptcha-'+i, {
'sitekey' : 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX'
});
}
};
</script>
And after you have successfully completed the above task, change in the AJAX success: response
并且在你成功完成上面的任务后，在AJAX success: response中更改
grecaptcha.reset(widgetId+id);
Here the id would be the same that is generated from the below for Loop.
这里的 id 与从下面的 for Loop 生成的相同。
