jqueryrecaptchainvisible-recaptcha

jquery submit() function does not work with invisible reCAPTCHA

I tried to use jquery function submit() to alert something when the form submitted but nothing happened. However if I removed the google invisible reCAPTCHA code, the submit function works. Is there a way to get the function to work without removing the google invisible reCAPTCHA?

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
      function onSubmit(token) {
        document.getElementById("demo-form").submit();
      }
    </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button
        class="g-recaptcha"
        data-sitekey="your_site_key"
        data-callback="onSubmit"
      >
        Submit
      </button>

      <br />
    </form>

    <script>
      $(document).ready(function () {
        $("#demo-form").submit(function () {
          alert("test");
        });
      });
    </script>
  </body>
</html>

Thank you!

Solution

  • I have used type="submit" on input instead of a button.

    <html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form onSubmit="alert('test') ">
      <input type="submit" />
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
    </form>
  </body>
</html>