Recaptcha v3 not working - form doesn't submit

Question

I am trying to implement recaptcha v3 in CakePHP 3.x. My template page looks like:

<?php $this->start('script'); ?>
<script src="https://www.google.com/recaptcha/api.js"></script>
<script type="text/javascript">
    function registerSubmit(token) {
        document.getElementById("register").submit();
    }
</script>
<?php $this->end(); ?>
...
<?php echo $this->Form->create($user, [ 'id' => 'register', 'name' => 'register']) ?>
...
<button type="submit"
        data-sitekey="<?php echo Configure::read('Captcha.site')?>"
        data-callback='registerSubmit'
        data-action='submit'
        class="g-recaptcha btn btn-lg btn-secondary text-uppercase">Get Started</button>
<?php echo $this->Form->end(); ?>

As far as I can tell the registerSubmit call never gets executed and my form doesn't submit - why?

I followed the instructions on the Google Developers page

Answer 1

I suspect the issue is that you have a button in the form with the id "submit". Any element in the form with a name or an id is reflected in a form attribute with that name. So if you have an element <input id="elephants"/> the form object will have an "elephants" attribute. In this case the submit button is accessible via form.submit, but this masks the submit() function. You can test this by adding an alert to the start of your registerSubmit() function. I believe the alert will get executed, and then the submit() call will fail to run the submit button as it is not a function.

If a form control (such as a submit button) has a name or id of submit, this method will mask the form's submit method.

MDN Web docs