Ajax Form With Google Invisible Recaptcha

Question

My code:

function onSubmit(token) {

  $(document).ready(function() {

    $("#submit").click(function() {
      var name = $("#name").val();
      var email = $("#email").val();
      var password = $("#password").val();
      var contact = $("#contact").val();

      // Returns successful data submission message when the entered information is stored in database.
      var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact;

      //AJAX code to submit form.
      $.ajax({
        type: "POST",
        url: "ajaxsubmit.php",
        data: dataString,
        cache: false,
        success: function(result) {
          alert(result);
        }
      });

      return false;
    });
  });

  $("#i-recaptcha").submit();

};

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

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

<form id='i-recaptcha'>

  <input type="text" id="name" /><br/>
  <input type="text" id="email" /><br/>
  <input type="password" id="password" /><br/>
  <input type="text" id="contact" /><br/>
  <br/>
  <input type="submit" id="submit" value="Submit" class="g-recaptcha" data-sitekey="6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk" data-callback="onSubmit" />

</form>

Problem:

When the user clicks on submit button for the first time, the captcha box appears, as expected.

But after completing the captcha verification, the box closes, and the form do not get submitted.

The user needs to click on the submit button again, in order to submit the form.

Expected result:

Click on submit button > Recaptcha box Appear > Verified > Automatically submit the form

Original Result

Click on submit button > Recaptcha box Appear > Verified > Click on submit button again > submit the form

I thought this line will submit the form after completing captcha

$( "#i-recaptcha" ).submit();

Answer 1

$("#submit").click(function() {

This function gets executed, when #submit button is clicked. Change it to submit(), function.

Here is the full code:

function onSubmit(token) {

  $(document).ready(function() {

    $("#i-recaptcha").submit(function() {
      var name = $("#name").val();
      var email = $("#email").val();
      var password = $("#password").val();
      var contact = $("#contact").val();

      // Returns successful data submission message when the entered information is stored in database.
      var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact;

      //AJAX code to submit form.
      $.ajax({
        type: "POST",
        url: "ajaxsubmit.php",
        data: dataString,
        cache: false,
        success: function(result) {
          alert(result);
        }
      });

      return false;
    });
     $("#i-recaptcha").submit();
  });

 

};

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

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

<form id='i-recaptcha'>

  <input type="text" id="name" /><br/>
  <input type="text" id="email" /><br/>
  <input type="password" id="password" /><br/>
  <input type="text" id="contact" /><br/>
  <br/>
  <input type="submit" id="submit" value="Submit" class="g-recaptcha" data-sitekey="6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk" data-callback="onSubmit" />

</form>