Load reCAPTCHA dynamically

Reza picture Reza · Feb 6, 2016 · Viewed 22.8k times · Source

There are several ways to load reCAPTCHA using javascript such as below:

<html>
  <head>
    <title>Loading captcha with JavaScript</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type='text/javascript'>
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
    </script>
  </head>
  <body>
      <div id="captcha_container"></div>
      <input type="button" id="MYBTN" value="MYBTN">
      <script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>
  </body>
</html>

This code load captcha on pageload. I want load reCAPTCHA just when clicked on "MYBTN". So the code changes into:

<html>
  <head>
    <title>Loading captcha with JavaScript</title>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script type='text/javascript'>
$('#MYBTN').on('click',function(){
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
 });
    </script>
  </head>
  <body>
      <div id="captcha_container"></div>
      <input type="button" id="MYBTN" value="MYBTN">
      <script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit" async defer></script>
  </body>
</html>

But this code didn't work when I click on "MYBTN" and reCAPTCHA not load. Help me plz. Thanks.

Answer

Gavriel picture Gavriel · Feb 6, 2016

You just need to call loadCaptcha()

$('#MYBTN').on('click',function(){
    var captchaContainer = null;
    var loadCaptcha = function() {
      captchaContainer = grecaptcha.render('captcha_container', {
        'sitekey' : 'Your sitekey',
        'callback' : function(response) {
          console.log(response);
        }
      });
    };
    loadCaptcha(); // THIS LINE WAS MISSING
 });
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
      <div id="captcha_container"></div>
      <input type="button" id="MYBTN" value="MYBTN">
      <script src="https://www.google.com/recaptcha/api.js?onload=loadCaptcha&render=explicit"></script>