以Ajax格式添加Google Invisible Recaptcha

时间:2017-09-01 14:39:53

标签: javascript jquery html ajax forms

这是我的代码ajax表单代码没有安装Google Invisible Recaptcha

$("form.formajax").click(function()
{
var form = $(this);
console.log(form);

    //AJAX code to submit form.
    $.ajax(
    {
      type: "POST",
      url: $(this).attr("action"),
      data: $(this).serialize(),
      cache: false,
      success: function(data)
      {
        $(form).children(".signupresult").html(data.signupresult);
        $(form).children(".signupresult").css("opacity", "1");
        $(form).children(".signupresult").css("background-color", data.backgroundcolor);

        $(form).children(".loginresult").html(data.loginresult);
        $(form).children(".loginresult").css("opacity", "1");

        $(".forgotpassresult").html(data.forgotpassresult);
        $(".forgotpassresult").css("opacity", "1");
        $(".forgotpassresult").css("background-color", data.backgroundcolor);

        if (data.success == 1) 
        {
        window.location = "profile.php";
        }


      }

    });

  return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form class="loginform formajax" method="post" action="admin/login/logincheck.php">
    <input id="submit" type="text">
</form> 

<form class="loginform formajax" method="post" action="admin/login/logincheck.php">
    <input id="submit" type="text">
</form> 

现在,添加Google Invisible Recaptcha后,这是我的代码

var onloadCallback = function() {
    $( "#submit" ).each(function() {
        grecaptcha.render($( this ).attr('id'), {
            'sitekey' : '6Lcjvi4UAAAAAIR7_ckItF2HfMEFHx427WUDdGDk',
            'callback' : onsubmit
        });
    });
};







var onsubmit = function(token) 
{
  $(document).ready(function()
  {  
    $("form.formajax").click(function()
    {
    var form = $(this);
    console.log(form);

        //AJAX code to submit form.
        $.ajax(
        {
          type: "POST",
          url: $(this).attr("action"),
          data: $(this).serialize(),
          cache: false,
          success: function(data)
          {
            $(form).children(".signupresult").html(data.signupresult);
            $(form).children(".signupresult").css("opacity", "1");
            $(form).children(".signupresult").css("background-color", data.backgroundcolor);

            $(form).children(".loginresult").html(data.loginresult);
            $(form).children(".loginresult").css("opacity", "1");

            $(".forgotpassresult").html(data.forgotpassresult);
            $(".forgotpassresult").css("opacity", "1");
            $(".forgotpassresult").css("background-color", data.backgroundcolor);

            if (data.success == 1) 
            {
            window.location = "profile.php";
            }


          }

        });

      return false;
    });


  });
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<form class="loginform formajax" method="post" action="admin/login/logincheck.php">
    <input id="submit" type="text">
</form> 

<form class="loginform formajax" method="post" action="admin/login/logincheck.php">
    <input id="submit" type="text">
</form>

问题:

Google Recaptcha Verfication后,表单无法提交。

这就是:

用户点击提交按钮&gt;用户获取google recaptcha窗口&gt;用户回答问题&gt;提交recaptcha&gt;已验证&gt; recaptcha窗口关闭&gt;表格没有提交。

在验证后,一旦recaptcha窗口关闭,表单就会被提交。

但是在窗口关闭后,用户需要再次单击表单提交按钮(共两次)。

如何在google验证用户不是机器人后提交表单。

0 个答案:

没有答案