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

Question

I load my contact form into my page with JQuery/AJAX.

The contact form contains the reCaptcha scripts.

Unfortunately, JQuery removes the script tags before inserting them into my page. These script tags are needed because they output the captcha. now my loaded form has no captcha.

Answer 1

@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);
    }
});

Answer 2

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
    }
  );