使用Google Invisible Recaptcha的Ajax表单

时间:2017-08-31 05:53:04

标签: javascript jquery html ajax forms

我的代码:

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按钮时,会出现预期的验证码框。

但是在完成验证码验证后,该框关闭,表单未提交。

用户需要再次点击submit按钮才能提交表单。

预期结果:

点击提交按钮&gt; Recaptcha box出现&gt;已验证&gt;自动提交表单

原始结果

点击提交按钮&gt; Recaptcha box出现&gt;已验证&gt;再次点击提交按钮&gt;提交表格

我认为这行将在完成验证码后提交表格

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

1 个答案:

答案 0 :(得分:2)

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

单击#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>