javascript - Load reCAPTCHA dynamically -
there several ways load recaptcha using javascript such below:
<html> <head> <title>loading captcha 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. want load recaptcha when clicked on "mybtn". code changes into:
<html> <head> <title>loading captcha 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 code didn't work when click on "mybtn" , recaptcha not load. me plz. thanks.
you need 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(); // line 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>
Comments
Post a Comment