Implementing reCaptcha ajax api to an exiting webform that already uses ajax

[peaxPhasp]

I have a signup form on my home page which uses server side validation and ajax so my page doesn't refresh while validating.When all validation is passed my page is taken to a registered.html which is a temporary page for now. Later on it will be an account area.What I want I want to have 1 last step after the actual form validation which will be my reCaptcha validation. Instead of submitting the form after validation I want reCaptcha to popup twitter style or just replace the form fields facebook style.Only after successful captcha validation will the form be submitted. I have provided the code below and would really appreciate if someone could advise me on the best way to implement this. Right now I'm at a stage where I'm confused.Error checking and at the very bottom you can see the echo statement that sends a user to registered.html after successful validation\[code\]<?php// we check if everything is filled inif(empty($_POST['first_name']) || empty($_POST['last_name']) || empty($_POST['email']) || empty($_POST['password'])){ die(msg(0,"All the fields are required"));}// is the sex selected?if(!(int)$_POST['sex']){ die(msg(0,"You have to select your sex"));}// is the birthday selected?if(!(int)$_POST['day'] || !(int)$_POST['month'] || !(int)$_POST['year']){ die(msg(0,"You have to fill in your birthday"));}// is the email valid?if(!(preg_match("/^[\.A-z0-9_\-\+]+[@][A-z0-9_\-]+([.][A-z0-9_\-]+)+[A-z]{1,4}$/", $_POST['email']))) die(msg(0,"You haven't provided a valid email"));// Here I must put your code for validating and escaping all the input data,// inserting new records in your DB and echo-ing a message of the type:// echo msg(1,"/member-area.php");// where member-area.php is the address on my site where registered users are// redirected after registration.echo msg(1,"registered.html");function msg($status,$txt){ return '{"status":'.$status.',"txt":"'.$txt.'"}';}?>\[/code\]The javascript\[code\]$(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);}\[/code\]Now I'm thinking there must be a simple way to implement reCaptcha ajax api into my current form. At first I tried to add \[code\]onclick="showRecaptcha('recaptcha_div');"\[/code\] to the end of my form where my input type=submit is located this didn't work.The end of my form\[code\] <td><input type="submit" class="joinButton" value="http://stackoverflow.com/questions/3761899/Join Us" /><img id="loading" src="http://stackoverflow.com/questions/3761899/<?php echo base_url()?>images/join/ajax-loader.gif" alt="working.." /></td> <div id="recaptcha_div"></div> </tr>\[/code\]I've follows the instructions on the recaptcha website and no luck so far. Code snippets, advice anything will help. I appreciate it.Thanks