After installing reCaptcha V3 I need to click twice on the submit button

[Corobori]

I just installed recaptcha v3 on a form and I noticed that the submit button needs to be clicked 2x to make it work.

<script>


		$('#newsletterForm').submit(function (event) {

			event.preventDefault();
			var email = $('#email').val();
			var name = $('#name').val();
			var phone = $('#phone').val();
			var message = $('#message').val();
			grecaptcha.ready(function () {

				grecaptcha.execute('mytokenhere', { action: 'subscribe_newsletter' }).then(function (token) {

					$('#newsletterForm').prepend('<input type="hidden" name="token" value="' + token + '">');
					$('#newsletterForm').prepend('<input type="hidden" name="action" value="subscribe_newsletter">');
					$('#newsletterForm').unbind('submit').submit();
				});;
			});
		});
	</script>

On Stackoverflow I found an alternate solution but it comes up with an error Uncaught Error: No reCAPTCHA clients exist.

	<script>

        var alreadySubmitted = false;//adding a extra variable to check already submitted.
        $("#newsletterForm").submit(function (event) {
            if (grecaptcha.getResponse() && alreadySubmitted) {
                // 2) finally sending form data
                alreadySubmitted = true;
                $("#newsletterForm").submit(); // here you are doing wrong
            } else {
                grecaptcha.reset();
                console.log('validation completed.');


				event.preventDefault(); //prevent form submit before captcha is completed
                var email = $('#email').val();
                var name = $('#name').val();
                var phone = $('#phone').val();
                var message = $('#message').val();
                grecaptcha.execute('mytokenhere', { action: 'subscribe_newsletter' }).then(function (token) {

                    $('#newsletterForm').prepend('<input type="hidden" name="token" value="' + token + '">');
                    $('#newsletterForm').prepend('<input type="hidden" name="action" value="subscribe_newsletter">');
                    $('#newsletterForm').unbind('submit').submit();
                });;

            }

		});

	</script>

[Martyr2]

A couple of questions…

1. Where do you have the script in the page? At the bottom? I ask because usually I put all event handlers in jQuery inside some kind of $(document).ready() type of function just to make sure that all elements are loaded before this code kicks off. If it is at the bottom before body closing tag, should be fine too.

2. After the first click, do you see any errors appear in the development console window in dev tools? If so, what is it?

[Corobori]

1. It is at the bottom

2. No error in the console window on the 1st click. See it here http://www.tmb-usa.com/contact-tmb2.html

[Martyr2]

Your submit button is named “submit”. Rename it to something like “submit2”. After doing this, you should see the code start working. I believe the button being named submit is causing an issue with your unbind(‘submit’).submit() code and thus not submitting. It works on the second time because you unbind the submit event, so that form goes back to the old submit functionality and this jquery code is not involved anymore.

Let me know if that solves the issue.

[Corobori]

Thank you for your input, this solved the issue.