How can I load a reCaptcha form using jQuery/AJAX while leaving the reCaptcha scripts in place?

@benck, great answer! But it's become a bit outdated. The current script URL is:

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>

And the code should be like below:

grecaptcha.render('element_id', {    sitekey: recaptchaSiteKey,    callback: function(response) {        console.log(response);    }});

The link has all you need: http://code.google.com/apis/recaptcha/docs/display.html

You can't add the script in ajax. You should add the following line before :

  <script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

Then, you can dynamically create a recaptcha form in your js code by using adding the following code:

  Recaptcha.create("your_public_key",    "element_id",    {      theme: "red",      callback: Recaptcha.focus_response_field    }  );

My approach is a bit different:

<script src='https://www.google.com/recaptcha/api.js?render=explicit' async defer></script><form>    <input name="whatEver" type="text">    <div id="captcha"></div>    <button>submit</button></form><script>var captchaWidgetId = grecaptcha.render( 'captcha', {    'sitekey' : 'your_site_key'    'theme' : 'light'});$(document).ready(function(){    $('form').on('click','button', function(e){        var formDatas = $(this).closest('form').serialize()+'&response='+grecaptcha.getResponse(captcha);        $.post('post.php', formDatas, function(data){            //successful        });    });});</script>