首页 文章

在preventDefault（）之后，POST数据没有正确发送 - 新的Google的隐形reCAPTCHA相关

提问于
浏览 次
1

UPDATE 2

看起来我无法从使用隐形reCAPTCHA注册的回调（onSubmit函数）中访问文档元素（包括表单） . 更新了以下代码 .

在浏览器控制台中，当JS到达“document.getElementById（”info_form“）时，我收到下面的错误消息.admit（）”在JS中调用：

10：26：47.556 TypeError：document.getElementById（...） . submit不是函数1 selector.php：13：9

出现时图像CAPTCHA正确解决，警告对话框正确显示 . 但是，我无法在回调中明确地提交表单到我的后端 . 请注意，根据以下链接中的Google说明，我需要按照以下规定调用preventDefault（） . 如果我删除它，reCAPTCHA流程将被中断 .

UPDATE

所以，它看起来像“event.preventDefault（）;”这是关键路线 . 如果我拥有它，则显示reCAPTCHA（即图像选择网格），并且我可以与小部件交互 . 但是，POST参数不会被发送 . 如果我注释掉preventDefault（），POST会正确进行 - 但是reCAPTCHA流程没有启动 . 这意味着，当其他POST参数被发送时，重要的reCAPTCHA数据不会被发送，因为根本不执行该流程 .

那么，我该怎么做呢？看起来我需要在“grecaptcha.execute（）”之前调用“preventDefault”以启用reCAPTCHA流程（正如Google在其代码段中所示） . 但这样做会以某种方式弄乱POST数据 . 我也明确地调用了“document.getElementById（”info_form“） . submit（）”，但没有帮助 . 任何想法都会很棒 . 谢谢！

Also, Google's invisible reCAPTCHA is a relatively new construct and still in beta. 可能是一些核心问题：那 . 我们经常习惯的是他们常规的reCAPTCHA，我们看到"I am not a robot"复选框 . 不可见的reCAPTCHA没有第一行UI小部件 - 如果需要，它只会让您直接成像CAPTCHA .

ORIGINAL POST

我需要你的帮助来弄清楚为什么我的1）按钮onclick =验证功能和2）我的表格POST不能共存 .

具体来说，如果我在下面注释掉“document.getElementById（'submit'） . onclick = validate”，那么我的表单POST会成功通过 . 但是，如果我注册验证功能，表单POST不起作用 . 谷歌告诉我（下面提供的谷歌链接）如果我想在执行隐形reCAPTCHA之前验证输入，我需要调用“grecaptcha.execute（）;”在按钮onclick事件期间 .

So, my general question is ，执行（或在）按钮onclick = validate函数后，如何确保通过POST正常提交info_form，以便在后端PHP中看到它？ POST "itself"不一定不起作用 - 但是通过POST提交的参数可能会以某种方式搞砸 - 只是一个想法 .

源代码和下面的其他代码特定注释 . 此外，请注意我已经在Google链接中使用了另外两种形式的reCAPTCHA绑定 . “grecaptcha.execute（）”变体是我唯一遇到麻烦的变种 .

<?php
   include 'msg_recaptcha.php'; // use the debugMessage output
?>

<html>
<head>

<script>

function onSubmit(callbackInput) 
{
    var message = "g-recaptcha-response token successfully received.\n";
    message += "Token = ";
    message +=  callbackInput;
    alert(message);

    document.getElementById("info_form").submit();    
}

function validate(event) {
   event.preventDefault();
   if (!document.getElementById('firstname').value) {
     alert("Please enter name");
   } else {
      grecaptcha.execute();
   }
}
</script>

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

<body>
 <form id='info_form' action="invisible_recaptcha_form.php" method="post">
 First name: <input id="firstname" name="firstname">
 Second name: <input id="secondname" name="secondname">

 <div id='recaptcha' class="g-recaptcha"
      data-sitekey="<Site key (public) from Google>"
      data-callback="onSubmit"
      data-size="invisible">
 </div>
 <button id='submit'>submit</button>

如果我注释掉下面的"onclick = validate"行，我的服务器PHP将通过POST收到表单详细信息 - 包括名字 . 但是，我可以't comment it out in final solution, since I need to run the recaptcha 1813796 function in validate() function as per Google'的说明https://developers.google.com/recaptcha/docs/invisible . Google 's instructions is that, they don' t的问题显示了如何执行POST以及他们的grecaptcha.execute（）要求 - 我需要确保来自reCAPTCHA操作的有效负载在POST中发送到我的后端，以便我的后端可以通话到Google服务器验证reCAPTCHA有效负载 .

<script>
    document.getElementById('submit').onclick = validate;
</script>

<div id="debugmessage"><?=$debugMessage?> </div>

感谢大家！

javascript php post recaptcha

2 回答

  • 0

    您必须更改 onSubmit JS函数以在重新验证后执行表单提交 .

    function onSubmit(token) {
   alert('thanks ' + document.getElementById('firstname').value);
   document.getElementById("info_form").submit();
}

    UPDATE

    当您在onsubmit eventHandler上调用 event.preventDefault() 时，您说浏览器默认情况下不执行表单提交，并且您将在需要时执行此操作 .

    回复于
  • 0

    我可以看到你接受参数进入验证功能

    function validate(event) {
   event.preventDefault();
   if (!document.getElementById('firstname').value) {
 alert("Please enter name");
   } else {
  grecaptcha.execute();
   }

    但是你没有传递任何参数来验证

    document.getElementById('submit').onclick = validate

    这就是它给你错误的原因 .

    修改您的验证函数不要参数 . 我在想你为什么不在任何地方使用它时需要将参数带入验证函数？

    回复于

相关问题