使用相同形式的两个按钮进行不可见的recaptcha答案

【问题标题】：Use two buttons in the same form for invisible recaptcha使用相同形式的两个按钮进行不可见的recaptcha
【发布时间】：2017-10-17 20:22:53
【问题描述】：

我正在尝试实施来自 Google 的新隐形验证码。一切正常，但我的表单总是有两个提交按钮，它们对输入执行不同的操作。

我试图简单地在我的表单中添加另一个，但谷歌只识别代码中的第一个。

我想不出任何会阻止另一个按钮正常工作的原因。这是我尝试过的一个简单示例：

<form action="page.php" method="POST">
<input type="text" value="textfield"/><br/>
<button class="g-recaptcha" data-sitekey="mysitekey" data-callback='onSubmit' value="anaction">An action</button>
<button class="g-recaptcha" data-sitekey="mysitekey" data-callback='onSubmit' value="anotheraction">Another action</button>
</form>

我通常通过对 POST 值进行 isset 来区分这两个按钮。在这里，它似乎不适用于第二个按钮。如果我切换两行，它将使另一个按钮正确提交。

如果有人对此有想法，我会感谢他的启发。

谢谢你:)

【问题讨论】：

标签： forms button recaptcha invisible

【解决方案1】：

我遇到了同样的问题，我修复了如下：

<button type="submit" class="g-recaptcha"
                id="captcha1"
                data-sitekey="YOUR_SECRETKEY"
                data-callback="sendData">button</button>

<button type="submit" class="g-recaptcha"
                id="captcha2"
                data-sitekey="YOUR_SECRETKEY"
                data-callback="sendData">button</button>

<script type="text/javascript">

$( document ).ready(function() {
    $(".g-recaptcha").each(function() {
        var object = $(this);
        grecaptcha.render(object.attr("id"), {
            "sitekey" : "YOUR_SITEKEY",
            "callback" : function(token) {
                object.parents('form').find(".g-recaptcha-response").val(token);
                object.parents('form').submit();
            }
        });
    });
  }
);

</script>

【讨论】：

谢谢，它有点工作。不过，Recaptcha 总是要求确认。我还有另一个问题，现在recaptcha 似乎永远不会有效。您放置了函数 sendData，但它没有在您粘贴的代码中定义。我假设函数 sendData 使用 getElementById 发送表单？
是的，我把函数发给你了

【解决方案2】：

是的，我创建了一个如下所示的函数 sendData：

<script type="text/javascript">

function sendData(){
    var test = $("#test").val();

    if(test != ""){
        $.post( "page.php",
            { 'g-recaptcha-response': grecaptcha.getResponse(), 'test' : test})
                .done(function( data ) {

                   console.log(data);
               }
        );
    }else{
        console.log(data);
    }

    grecaptcha.reset(); //important

}

</script>

【讨论】：

【解决方案3】：

将令牌存储在隐藏字段中，并使用它而不是 g-recaptcha-response 值来发送您的验证请求。您可以通过在 JSON 返回对象中保存 action 项来区分这两个提交。顺便说一句，我不知道为什么会这样。

<head>
...
<script src="https://www.google.com/recaptcha/api.js"></script>
<script>
    function onSubmit(token) {
        document.getElementById("token").value = token;
        document.getElementById("form").submit();
    }
</script>
...
</head>
<body>
...
<form id="form" action="page.php" method="POST">
<input type="hidden" id="token" name="token">
...
<button type="submit" class="g-recaptcha" data-sitekey="..." data-callback="onSubmit" data-action="action">An Action</button>
<button type="submit" class="g-recaptcha" data-sitekey="..." data-callback="onSubmit" data-action="anotheraction">Another Action</button>
</form>

【讨论】：