Can't explicitly render Google ReCaptcha and have a callback function working

Question

I am building a form on a website, and I am having and issue getting a function to run when the ReCaptcha is submitted. This function removes the disabled attribute on the submit button.

There is also a chance that multiple forms may be used on one page so I implemented the following solution to allow multiple captacha forms on one page:

https://stackoverflow.com/a/33535769/2506219

It seems I can either allow multiple ReCaptcha forms or have the submit button allowed but not both.

Here is the code:

HTML

<div class="g-recaptcha" data-callback="verifyCallback"></div>     

<script src="https://www.google.com/recaptcha/api.js?onload=CaptchaCallback&render=explicit" async defer></script>

JavaScript

<script>

  var CaptchaCallback = function() {
    $('.g-recaptcha')
      .each(function(index, el) {
        grecaptcha.render(el, { 'sitekey': 'XXXX' });
      });
    };

  function verifyCallback() {;
    $('#submitBtn').prop('disabled', false);
  }

</script>

Thank-you.

score 0 · Accepted Answer · answered Feb 27 '17 at 11:57

Worked it out!

I needed to call the function from the callback, having it in the HTML doesn't work

var CaptchaCallback = function() {
  $('.g-recaptcha')
    .each(function(index, el) {
      grecaptcha.render(el, { 'sitekey': 'XXXX', 'callback': verifyCallback });
  });
 };

Can't explicitly render Google ReCaptcha and have a callback function working

1 Answers1