CODEWITHSUNDEEP
javascriptphphtmlrecaptcha
CrazyDeveloper
CrazyDeveloper

Reputation: 105

preventDefualts doesn't allow form submit in Invisible ReCaptcha

Recently i was trying to use Google's invisible ReCaptcha, so i've copied the same example as Google mentioned in their official documentation; but the form doesn't submit, and we cant proceed to next page(form action page).

Client snippet:

<html>
<head>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
    <script>
        function onSubmit(token) {
            document.getElementById("myform").submit();
        }
        function validate(event) {
            event.preventDefault();
            if (!document.getElementById('field').value) {
                alert("Please enter your name.");
            } else {
                grecaptcha.execute();
            }
        }
        function onload() {
            var element = document.getElementById('submit');
            element.onclick = validate;
        }
    </script>
</head>
<body>
<form id='myform' method="post" action="test.php">
    Name: (required) <input id="field" name="field">
    <div id='recaptcha' class="g-recaptcha"
         data-sitekey="mysitekeyxXX"
         data-callback="onSubmit"
         data-size="invisible"></div>
    <button id='submit'>submit</button>
</form>
<script>onload();</script>
</body>
</html>

Server snippet (test.php):

var_dump($_POST['g-recaptcha-response']);

there is other code for google's verification process but it doesn't get into this page anyway (the action page)

Upvotes: 2

Views: 1836

Answers (1)

user6188497
user6188497

Reputation:

I'm not sure if you have copied everything 1:1 or Google did some docs update but this function is a bit different from reCAPTCHA's one click here:

    function onSubmit(token) {
        document.getElementById("myform").submit(); // <- this
    }

and it won't work because you have a button with ID "submit".

<button id='submit'>submit</button>

To make it submit correctly you have to rename button's id to something else.
Also event.preventDefault() prevents of executing default form submit so you should leave it as it is. After fixing this name problem it will work perfectly!

Upvotes: 2

Related Questions