Uncaught Type Error on Invisible reCaptcha while Form Submit

Question

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/

Answer 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