Google reCAPTCHA undefined index g-recaptcha-response in bootstrap modal - php

Question

I just want to ask why my reCAPTCHA is not working when my form is in the bootstrap's modal? Have you ever experienced it?
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">×</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>
..I have sign.php to check if the reCAPTCHA is working. Although it is working if I dont use modal, but when I used modal, the recaptcha validation(sign.php) is not working.

Answer 1

You are not submitting the value of the recaptcha to the backend i.e to php script. Your submit button should be inside </form> tag else your form will not get submitted.
check
your response to the backend---
if (isset($_POST['g-recaptcha-response'])) {
$response = $_POST['g-recaptcha-response'];
echo($response);
}
else {
echo"value is not passing to the php script";
}
Hope this helps!

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">×</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"});
}
Example: http://fiddle.jshell.net/emilhem/Lgovn28f/4/