Invisible recaptcha Programmatically invoke the challenge grecaptcha.getResponse() is always blank on page refresh
html, invisible-recaptcha, javascript, jquery, recaptcha
Solution
I'm not 100% sure but I think this is because you're calling `grecaptcha.getResponse()` directly after `grecaptcha.execute()` in a synchronous fashion which is not the intended way to use the invisible reCaptcha. The `grecaptcha.execute()` takes time to work (I'm assuming) and is designed to return asynchronously to the `data-callback` method. Once that's completed then you can use `grecaptcha.getResponse()` at any time (before calling `grecaptcha.reset()`) to get the response token. I think that's the idea behind `grecaptcha.getResponse()`. I'm assuming it works the second time because it's had time to process the invisible reCaptcha. I think `grecaptcha.getResponse()` is also more for the regular reCaptcha and not the invisible. Because the regular reCaptcha gets "completed" by the user where the invisible reCaptcha is "completed" on form submission which hence needs a callback to let us know it's been completed.
Problem
I am rendering the google recaptcha widget in my jsp page and programmatically invoking the challenge in my java script when I submit the form. ``` <script type="text/javascript" id="recaptcha-response"> var siteKey = $('#recaptchasitekey').first().text(); var onloadCallback = function() { grecaptcha.render('recaptcha_element', { 'sitekey' : siteKey, 'callback' : correctCaptcha, 'data-bind' : "qoActionTemplate" },true); }; var correctCaptcha = function(response) { return response; }; </script> <div class="g-recaptcha" id="recaptcha_element" data-size="invisible" ></div> <script src="http://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script> <script type="text/template" id="recaptchaUrl"> ``` Here is my java Script code that invokes the challenge. ``` executeRecaptcha : function() { grecaptcha.execute(); captcha.token = grecaptcha.getResponse(); if (captcha.token == null || captcha.token == '') { grecaptcha.reset(); grecaptcha.execute(); } return captcha.token; }, validateRecaptcha : function(response,checkToken) { captcha.executeRecaptcha(); if (captcha.token) { var captchaUrl = $('#recaptchaUrl').first().text(); captcha.userSIDVerify = $('#captcha_token').val(); $.ajax({ type : 'POST', url : captchaUrl, data : { response : captcha.token }, success : captcha.checkToken, error : function() { alert("failed") return; } }); } } ``` My `grecaptcha.getResponse()` is always empty on my first form submission and then for the second time I submit I get a response.