表单提交时，隐形reCaptcha上的未捕获类型错误 [英] Uncaught Type Error on Invisible reCaptcha while Form Submit

问题描述

我正在尝试通过谷歌实施新的隐形重访。

I'm trying to implement new invisible recaptcha by google.

但我需要输入并且应该在重新执行recaptcha之前验证表单。

But i have required inputs and should validate the form before recaptcha execute.

我在recaptcha回调函数上遇到错误：

I got an error on recaptcha callback function like that:

未捕获TypeError：document.getElementById（）提交不是函数

Uncaught TypeError: document.getElementById() submit is not a function

那么如何在执行验证和重新执行后提交表单？

So how can i submit the form after validate and recaptcha executed?

HTML ：

<script src="https://www.google.com/recaptcha/api.js" async defer></script>

<form id="form" action="?" method="post">
     Name: (required) <input id="field" name="field">
     <div id='recaptcha' class="g-recaptcha"
          data-sitekey="6LcAmBAUAAAAAFukLQIkOIICuBBxKEdn-Gu83mcH"
          data-callback="onSubmit"
          data-size="invisible"></div>
     <button id='submit'>submit</button>
   </form>
<script>onload();</script>

Javascript ：

function onSubmit(token) {
  alert('Thanks ' + document.getElementById('field').value + '!');
  document.getElementById('form').submit(); // This is error line
}

function validate(event) {
  event.preventDefault();
  if (!document.getElementById('field').value) {
    alert("Please enter your name.");
  } else {
    grecaptcha.execute();
  }
}

function onload() {
  var element = document.getElementById('submit');
  element.onclick = validate;
}

JSFiddle： http://jsfiddle.net/dp1cLh28/6/

JSFiddle: http://jsfiddle.net/dp1cLh28/6/

推荐答案

我找到了解决方案。

问题是按钮ID命名为提交（按钮id =submit）与 .submit（）函数冲突。

Issue is button id named as submit (button id="submit") conflicting with .submit() function.

我更改按钮ID，它有效！

When i change the button id, it works!

更改按钮ID ：

<button id='action'>Submit</button>
            ^ submit > action or whatever

这篇关于表单提交时，隐形reCaptcha上的未捕获类型错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！