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是否正常工作。虽然如果我不使用模态它是有效的，但是当我使用模态时，重新验证验证（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/

谷歌reCAPTCHA未定义索引g-recaptcha-response在bootstrap模式中

2 个答案: