问题

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

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

I got an error on recaptcha callback function like that:

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/

回答1:

I found the solution.

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

When i change the button id, it works!

Change the button id:

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

回答2:

In my case, I had an input (type="submit") tag in the form instead of a button. The name of the input was conflicting with the submit function.

The solution was to give the input tag a name different from "submit":

<input type="submit" name="anything-except-submit">

I had to name the tag explicitly, because the name was defaulting to "submit" from the type attribute.

It is also important to note that the callback will only be called when the user successfully solves the reCAPTCHA, so if your callback is doing any form validation you must call

grecaptcha.reset();

if the validation fails. That means that the user will have to solve the reCAPTCHA again, but otherwise he would not be able to submit the form after making corrections.