带有Google Invisible Recaptcha的Ajax表单 [英] Ajax Form With Google Invisible Recaptcha

问题描述

我的代码:

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按钮时，将按预期方式显示验证码框.

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.

用户需要再次单击submit按钮以提交表单.

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

预期结果:

单击提交"按钮>出现"复选框，然后单击已验证">自动提交表单"

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

原始结果

单击提交"按钮>重新出现"框出现>已验证>再次单击提交"按钮>提交表单

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();

推荐答案

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

单击#submit按钮时，将执行此功能.将其更改为submit()，功能.

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

这是完整的代码:

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>

这篇关于带有Google Invisible Recaptcha的Ajax表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！