using reCAPTCHA with ajax....javascript loading problem

Question

Hi,

I trying to implement reCAPTCHA in one of my forms,...but i am using ajax as the submission. (More specifically the prototype ajax.updater)

Once I submit and error check my form I try to load the reCAPCHTA widget thingy (in my updated div element) which basically just calls a javascript file like so:

<script type="text/javascript" src="http://api.recaptcha.net/challenge?k=6Le6SwUAAAAAAIWm8wCRFd8SrI-H0R1Yx4Tkw2Ks"&gt;&lt;/script&gt;

However the JS file is not being read?...and i've tried all combination of evalScripts:true and evalJS:'force' etc. in the ajax.updater.....however i don't think I have a very good understanding of why the js file isn't processing :(

If anyone can shed some light on this issue I will be very appreciative.

Thanks, Andrew

Answer 1

If that's the literal code snippet you're using, you haven't closed the tag... so it wouldn't be evaluated.

Answer 2

to answer my own question...

there is a reCAPTCHA AJAX api....which is pretty easy way to get around this problem:

link text

Also,..the documentation on the http://www.prototypejs.org/api/ajax/updater site.....talks about the evalscript option and how is only puts any javascript through the native eval() function....which kind of screws me over trying to implement error checking with WMD...but that's another story.

Andrew

Answer 3

This doesn't address your exact problem, but 'Dark Side of the Carton' has some excellent code for validating reCAPTCHA via jQuery AJAX which might help.

In summary:

Add the following Javascript:

$(function(){
     function validateCaptcha()
     {
         challengeField = $("input#recaptcha_challenge_field").val();
         responseField = $("input#recaptcha_response_field").val();
         //alert(challengeField);
         //alert(responseField);
         //return false;
         var html = $.ajax({
         type: "POST",
         url: "ajax.recaptcha.php",
         data: "recaptcha_challenge_field=" + challengeField + "&recaptcha_response_field=" + responseField,
         async: false
         }).responseText;

         if (html.replace(/^\s+|\s+$/, '') == "success")
         {
             $("#captchaStatus").html(" ");
             // Uncomment the following line in your application
             return true;
         }
         else
         {
             $("#captchaStatus").html("Your captcha is incorrect. Please try again");
             Recaptcha.reload();
             return false;
         }
     }

            //Modified as per comments in site to handle event unobtrusively
     $("#signup").submit(function(){
      return validateCaptcha();
    });
    });

Then add the ajax.recaptcha.php file which: "outputs only the word “success” if the captcha matches and a message and the response from reCaptchta if it fails. This is important because we are looking for the word success in our validateCaptcha() function."

require_once('/inc/recaptchalib.php');
$publickey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXX"; // you got this from the signup page
$privatekey = "XXXXXXXXXXXXXXXXXXXXXXXXXXXX";

$resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);

if ($resp->is_valid) {
    ?>success< ?
}
else 
{
    die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
       "(reCAPTCHA said: " . $resp->error . ")");
}

The example is in PHP, but I adapted it easily to work with Zope/Python