Google recaptcha未定义的索引G-Recaptcha响应在Bootstrap模式中

Question

我只想问为什么当我的表单在Bootstrap的模态中时我的recaptcha不起作用？你曾经经历过吗？

sign.php

if(empty($_POST['g-recaptcha-response']) === false){
    echo "Set.";
} else {
    echo "Not set.";
}

index.php

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Open form
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <form action="sign.php" method="post">
            <div class="form-group">
                Name:
                <input type="text" name="name" id="name">
            </div>
            <div class="form-group">
                reCaptcha:
                <div id="r1" class="g-recaptcha" data-sitekey="6Lc-xQUUAAAAAFc4apq1qbS_VI-ZTJHalsj5BGaa"></div>
            </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

..我有 sign.php检查recaptcha是否有效。尽管如果我不使用模态，它正在工作，但是当我使用模态时，recaptcha验证（sign.php）不起作用。

Answer 1

您没有将recaptcha的值提交给后端，即php脚本。您的提交按钮应在</form>标签内部，否则您的表格不会提交。

检查

您对后端的回应---

if (isset($_POST['g-recaptcha-response'])) {
  $response = $_POST['g-recaptcha-response'];
  echo($response);
 }
 else {
 echo"value is not passing to the php script";
   }

希望这会有所帮助！

Answer 2

<button id="showModal" type="button">Show Modal</button>
<div class="modal fade" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <div id="captcha"></div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

jQuery

$("#showModal").click(function() {
    $("#myModal").modal("show");
    setTimeout(function() {
        createRecaptcha();
    }, 100);
});

function createRecaptcha() {
    grecaptcha.render("captcha", {sitekey: "6LcgSAMTAAAAACc2C7rc6HB9ZmEX4SyB0bbAJvTG", theme: "light"});
}

示例：http：//fiddle.jshell.net/emilhem/lgovn28f/4/