reCAPTCHA Javascript Form

Hi,

I am trying to integrate Google’s reCAPTCHA into my PHP form that uses Javascript to process the information. I need the Javascript to post the necessary information to the action file that deals with the emailing.

The form itself is one where it stays on the same page and updates the text to say ‘Success’ or ‘Failure’ depending on if the message has been sent or not.

Anyway, after looking at Google’s API and instructions I made two additions to the Javascript file (which I have put in bold):

[CODE]jQuery(document).ready(function(){

$(‘#contactform’).submit(function(){

var action = $(this).attr(‘action’);

$(‘#submit’).attr(‘disabled’,’disabled’).after(‘<img src=”contact-form/assets/ajax-loader.gif” class=”loader” />’);

$(“#message”).slideUp(750,function() {
$(‘#message’).hide();

$.post(action, {
name: $(‘#name’).val(),
email: $(‘#email’).val(),
phone: $(‘#phone’).val(),
comments: $(‘#comments’).val(),
verify: $(‘#verify’).val()
[B] challengeField: $(“input#recaptcha_challenge_field”).val();
responseField: $(“input#recaptcha_response_field”).val(); [/B]

},

function(data){
document.getElementById(‘message’).innerHTML = data;
$(‘#message’).slideDown(‘slow’);
$(‘#contactform img.loader’).fadeOut(‘fast’,function(){$(this).remove()});
$(‘#submit’).removeAttr(‘disabled’);
if(data.match(‘success’) != null) $(‘#contactform’).slideUp(‘slow’);

// 2 functions added by TrueThemes
if(data.match(‘success’) != null) $(“html,body”).animate({
scrollTop: $(“#message”).offset().top
}, 1000, function(){
//scroll complete function
});
if(data.match(‘success’) == null) $(“html,body”).animate({
scrollTop: $(“#message”).offset().top
}, 1000, function(){
//scroll complete function
});

}
);

});

return false;

});

});[/CODE]

Above is the complete Javascript file.

Now this works with the reCAPTCHA, but the issue is that after adding those two lines, instead of being dynamic and updating the text, it now goes to the action page (contact.php), instead of just updating the current form page.

Below is my form action page:

[CODE]<?php
//error_reporting(E_ALL ^ E_NOTICE);
require_once(‘./recaptchalib.php’);
$privatekey = “6LeyOeYSAAAAAOg3j8mm7GO6oEbFvHDHgei_OaF_”;

# was there a reCAPTCHA response?
$response = recaptcha_check_answer($privatekey,
$_SERVER[“REMOTE_ADDR”],
$_POST[“recaptcha_challenge_field”],
$_POST[“recaptcha_response_field”]);

if ($response->is_valid) {
echo “Yes, that was correct!”;
} else {
# set the error code so that we can display it
echo “Eh, That wasn’t right. Try Again.”;

}
?>

[/CODE]

I’ve tried to make it as clear as I can, but no doubt I’ve missed details so please feel free to ask any questions.

For reference, I’ve uploaded the three necessary files to PasteBin:

Form: [url]http://pastebin.com/pJC7D6BE[/url]
Form action: [url]http://pastebin.com/HtKfdFA9[/url]
JS: [url]http://pastebin.com/RQ8xJ7TF[/url]

Thanks.

Also in #JavaScript _↴