I've got a pretty complicated 5 forms scenario. I'm using jQuery tabs with ajax to load the forms (external html files).
I'm also doing some form validation with jQuery validate.
At the end everything is working apart from, I have no post for 'g-recaptcha-response'.
So here is my index file:
<head>
<script type="text/javascript">
$(function() {
$( "#forms").tabs({
beforeLoad: function( event, ui ) {
ui.jqXHR.fail(function() {
ui.panel.html(
"Couldn't load this form. We'll try to fix this as soon as possible. "
);
});
},
active: false
});
});
</script>
</head>
<body>
<div id="forms" class="contactsHub">
<ul class="contactsHubList">
<li><a href="forms/form1.html">Form 1</a></li>
<li><a href="forms/form2.html">Form 2</a></li>
<li><a href="forms/form3.html">Form 3</a></li>
<li><a href="forms/form4.html">Form 4</a></li>
<li><a href="forms/form5.html">Form 5</a></li>
</ul>
</div>
</body>
One of my form files:
<script type="text/javascript">
jQuery("#newsletter_form").validate({
onkeyup: false,
rules: {
full_name_5: "required",
email_5: {
required: true,
email: true
}
},
messages: {
full_name_5: "Please enter your Full Name.",
email_5: "Please enter a valid email address."
},
submitHandler: function (form) {
jQuery("#wait").show();
setTimeout(function(){
form.submit();
}, 5);
}
});
var CaptchaCallback = function(){
grecaptcha.render('RecaptchaField5', {
'sitekey' : 'my_key'
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>
<div class="tabContent tabContent5">
<form id="newsletter_form" method="post" action="grab.php">
<ul>
<h2 title="Newsletter">Newsletter</h2>
<input type="hidden" name="form_name" id="form_name" value="Newsletter Signup">
<li>
<label>Full Name *</label>
<input name="full_name_5" id="full_name_5" type="text" placeholder="Full Name *">
</li>
<li>
<label>Email *</label>
<input name="email_5" id="email_5" type="text" placeholder="Email *">
</li>
<li class="recaptchaWrapper">
<div id="RecaptchaField5"></div>
</li>
<li class="submitForm">
<input name="submit_5" value="Sign Up Now" id="submit_5" class="submitButton" type="submit">
</li>
</ul>
</form>
</div>
And my grab.php
// your secret key
$secret = "my_secret";
// empty response
$response = null;
// check secret key
$reCaptcha = new ReCaptcha($secret);
// if submitted check response
if ($_POST["g-recaptcha-response"]) {
$response = $reCaptcha->verifyResponse(
$_SERVER["REMOTE_ADDR"],
$_POST["g-recaptcha-response"]
);
}
if ($response != null && $response->success) {
echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
foreach ($_POST as $key => $value) {
echo '<p><strong>' . $key.':</strong> '.$value.'</p>';
}
}
else {
foreach ($_POST as $key => $value) {
echo '<p><strong>' . $key.':</strong> '.$value.'</p>';
}
So what I'm getting is an empty $_POST["g-recaptcha-response"]
Any help will be appreciated!
This will send a POST in a form
$_POST["g-recaptcha-response"]