使用谷歌不可见的Recaptcha的Ajax表单

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.

当用户第一次单击submit按钮时，会出现验证码框，如预期的那样。

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.

用户需要再次单击submit按钮，以便提交表单。

Expected result:

预期结果:

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

点击提交按钮> Recaptcha框出现>验证>自动提交表单

Original Result

原来的结果

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

点击提交按钮> Recaptcha框出现>验证>再次点击提交按钮>提交表单

I thought this line will submit the form after completing captcha

我想这一行会在完成验证码后提交表单

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

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

1 个解决方案

#1

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

$(" #提交”).click(函数(){

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

当单击#submit按钮时，该函数将被执行。将其更改为submit()，函数。

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>

#1