Javascript 表单提交时不可见的reCaptcha上出现未捕获类型错误

我正试图通过谷歌实现新的隐形重述

但是我需要输入，应该在recaptcha执行之前验证表单

我在recaptcha回调函数中遇到了如下错误：

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

那么，在执行validate和recaptcha之后，如何提交表单呢

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>

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;
}

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

jsfdle:

我找到了解决方案

问题是名为

submit

（

button id=“submit”

）的按钮id与

.submit（）

函数冲突

当我更改按钮id时，它会工作

更改按钮id：

<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>

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;
}

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

提交
^提交>行动或其他

我找到了解决方案

问题是名为

submit

（

button id=“submit”

）的按钮id与

.submit（）

函数冲突

当我更改按钮id时，它会工作

更改按钮id：

<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>

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;
}

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

提交
^提交>行动或其他

在我的例子中，表单中有一个输入（type=“submit”）标记，而不是按钮。输入的名称与提交函数冲突

解决方案是给输入标记一个不同于“提交”的名称：

---

如果验证失败。这意味着用户必须再次解决reCAPTCHA问题，否则他将无法在更正后提交表单。

在我的情况下，表单中有一个输入（type=“submit”）标记，而不是一个按钮。输入的名称与提交函数冲突

解决方案是给输入标记一个不同于“提交”的名称：

如果验证失败。这意味着用户必须再次解决reCAPTCHA问题，否则，他将无法在更正后提交表单。

检查您的域白名单 我有这个错误，直到我发现错误是我没有将正确的域添加到域白名单中，我才能解决它

控制台上没有显示域错误，我也没有注意到页面上显示错误的选项卡（如下所示）：

检查您的域白名单 我有这个错误，直到我发现错误是我没有将正确的域添加到域白名单中，我才能解决它

控制台上没有显示域错误，我也没有注意到页面上显示错误的选项卡（如下所示）：

---

谢谢！我也是这样。如果您正在使用127.0.0.1或其他类似工具进行本地调试，而这些工具尚未添加到允许的域列表中，这可能就是原因。谢谢！我也是这样。如果您正在使用127.0.0.1或其他类似工具进行本地调试，而这些工具尚未添加到允许的域列表中，则这可能是原因。