Amir Hussain
Learner
How do get my ajax form to inject captcha verification into the browser after successful form validation?
I would like to have one last step that pulls reCaptcha and when reCaptcha has been passed only then is the registration details of the user sent to my database and user forwarded to what ever page I choose.I would like to have one last step that pulls reCaptcha and when reCaptcha has been passed only then is the registration details of the user sent to my database and user forwarded to what ever page I choose.
Here is my javascript and ajax. The submit.php is a file that holds all my validation rules. I think I now have to have a file that holds my captcha and use ajax to get that file or maybe there is some better way. I’m still learning.
$(document).ready(function(){
$('#fhjoinForm').submit(function(e) {
register();
e.preventDefault();
});
});
function register()
{
hideshow('loading',1);
error(0);
$.ajax({
type: "POST",
url: "submit.php",
data: $('#fhjoinForm').serialize(),
dataType: "json",
success: function(msg){
if(parseInt(msg.status)==1)
{
window.location=msg.txt;
}
else if(parseInt(msg.status)==0)
{
error(1,msg.txt);
}
hideshow('loading',0);
}
});
}
function hideshow(el,act)
{
if(act) $('#'+el).css('visibility','visible');
else $('#'+el).css('visibility','hidden');
}
function error(act,txt)
{
hideshow('error',act);
if(txt) $('#error').html(txt);
}Here is my javascript and ajax. The submit.php is a file that holds all my validation rules. I think I now have to have a file that holds my captcha and use ajax to get that file or maybe there is some better way. I'm still learning. $(document).ready(function(){ $('#fhjoinForm').submit(function(e) { register(); e.preventDefault(); }); }); function register() { hideshow('loading',1); error(0); $.ajax({ type: "POST", url: "submit.php", data: $('#fhjoinForm').serialize(), dataType: "json", success: function(msg){ if(parseInt(msg.status)==1) { window.location=msg.txt; } else if(parseInt(msg.status)==0) { error(1,msg.txt); } hideshow('loading',0); } }); } function hideshow(el,act) { if(act) $('#'+el).css('visibility','visible'); else $('#'+el).css('visibility','hidden'); } function error(act,txt) { hideshow('error',act); if(txt) $('#error').html(txt); }
Share
If you don’t have registered to use the reCAPTCHA API,Please navigate to below link and register the website in which you want to integrate Google RECaptcha API.You need to provide a Label value and the domain name of the website for which you want to use the RECaptcha.Once the registration is completed you will get the Site Key & Secret Key.
https://www.google.com/recaptcha/admin
Add the below code in your registration form in which you need to integrate the reCAPTCHA.
<divclass="g-recaptcha"data-sitekey="YOUR_KEY"></div>Please use captcha: grecaptcha.getResponse() this and you’ll get the output what you exactly looking for.
$(document).ready(function() {
var contactForm = $("#fhjoinForm");
//We set our own custom submit function
contactForm.on("submit", function(e) {
//Prevent the default behavior of a form
e.preventDefault();
//Get the values from the form
var name = $("#name").val();
var email = $("#email").val();
//AJAX POST
$.ajax({
type: "POST",
url: "submit.php",
data: {
name: name,
email: email,
//THIS WILL CONFIRM IF THE USER IS CAPTCHA VERIFIED OR NOT.
captcha: grecaptcha.getResponse()
},
success: function() {
console.log("Data submitted..");
}
})
});
});
Code Example: submit.php<?php
$name=stripslashes($_POST["name"]);
$email=stripslashes($_POST["email"]);
$secret="YOUR_SECRET"; // Replace with Secret Key
$response=$_POST["captcha"];
$verifyCaptcha=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$secret}&response={$response}");
$captcha_success=json_decode($verifyCaptcha);
if ($captcha_success->success==false) {
//This user was not verified by reCAPTCHA.
}
else if ($captcha_success->success==true) {
//This user is verified by reCAPTCHA
}