如何在HTML元素中使用jQuery选择器(reCaptcha)

Question

此处为业余时间。

我有一个现有的HTML联系人表单。这不是我的代码。这是它的摘要版本。它有一个作为按钮的输入字段。有一个函数是为单击按钮时定义的，我相信它封装在jQuery选择器中。该函数随后调用表单的submit函数，该函数也封装在jQuery中。

$("#contact-form .submit-button").on("click", function (e) {
$("#contact-form").submit()
}
$("#contact-form").on("submit", function (e) {
})

当我添加reCaptcha时，我可以提供回调功能。我想直接调用表单的提交函数。我试过了：

<div style="margin-top:5px;margin-bottom:15px;" id="reCaptcha" data-size="invisible" class="g-recaptcha" data-sitekey="myKey" data-callback="$(&quot;#contact-form&quot;).submit"></div>

但是，它似乎没有任何作用。我想我可以添加一个helper函数，但是有没有直接的方法将表单的submit函数传递给这个reCaptcha HTML元素？

Answer 1

这可能会给你一个开始的地方——基本上你想触发提交：$("#contact-form").trigger("submit");

这是一个完全未经测试的模型：

$("#contact-form").on("click", '.submit-button', function(event) {
$(event.delegateTarget).trigger('submit')
});
$("#contact-form").on("submit", function(e) {
e.preventDefault()
console.log('I would submit');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js?render=your reCAPTCHA site key here"></script>
<script>
grecaptcha.ready(function() {
//request recaptcha token; response is promise
grecaptcha.execute('your reCAPTCHA site key here', {
action: 'validate_captcha'
})
.then(function(token) {
// add token value to form
document.getElementById('g-recaptcha-response').value = token;
//trigger submit
$("#contact-form").trigger("submit");
});
});
</script>
<form id="contact-form">
<input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
<input type="hidden" name="action" value="validate_captcha"> mything: <input id="my-thing" />
<button type="submit" name="submit">Submit Me</button>
</form>