ReCaptcha: How to autosubmit the form when the cap

Question

I want to use ReCaptcha to load some extra data on the page. I want the form to be auto submitted when the ReCaptcha was entered. So that I don't need the extra submit button. The problem is that recaptcha loads its content inside an iframe, so its a bit difficult.

At the moment I have this form:

<form action="javascript:getInfo(grecaptcha.getResponse(widget1));" >
      <div id="captcha"></div>
      <br>
      <input type="submit" value="Submit">
</form>

How do I get something like an Event-Listener on the recaptcha submit which submits the outer form?

Answer 1

Use # instead of ?

? is used to begin query strings and will mess with method=GET type responses. # is the anchor symbol and will work.

Answer 2

That's sounds like an interesting technique. It would cut down on the clicking and key strokes for the user. Here is how you could do that, by listening for the successful captcha response you would be able to follow up with the desired action. Here is an example and some documentation. https://developers.google.com/recaptcha/docs/display#example

var RC2KEY = 'sitekey';

function reCaptchaVerify(response) {
  if (response === document.querySelector('.g-recaptcha-response').value) {
    document.forms['form-name'].submit();
  }
}

function reCaptchaExpired() {
  /* do something when it expires */
}

function reCaptchaCallback() {
  grecaptcha.render('id', {
    'sitekey': RC2KEY,
    'callback': reCaptchaVerify,
    'expired-callback': reCaptchaExpired
  });
}

<script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'></script>