javascript - 带有 Google Invisible Recaptcha 的 Ajax 表单

Question

我的代码:

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>

问题:

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

但是在完成验证码验证后，框关闭，并且没有提交表单。

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

预期结果:

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

原始结果

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

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

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

Answer 1

$("#submit").click(函数() {

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

完整代码如下:

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>