6

I'm using reCaptcha v2 invisible. I have a simple form with a disabled submit button. Google reCAPTCHA is enabling my disabled button. 

<script src="https://www.google.com/recaptcha/api.js"></script>

<form action="/action_page.php" id="referral-form">
    First name:
    <br>
    <input type="text" name="firstname">
    <br>
    Last name:
    <br>
    <input type="text" name="lastname">
    <br>
    <input type="submit" id="form-submit-btn" disabled="disabled" class="g-recaptcha" data-callback='onSubmit' data-sitekey="***************" value="Submit">
</form>

function onSubmit() {
    if (grecaptcha.getResponse() !== "") {
        $('#referral-form').submit();
    }
        grecaptcha.reset();
}

When I remove class="g-recaptcha" the button is properly disabled.

Improve this question
2
  • I think Recaptcha enables it, because otherwise it can't submit. Maybe you should make a callback once Recaptcha is loaded and disable the button from there and depend on the other inputs after that.
    – Mihail Minkov
    Commented Jan 2, 2020 at 16:24
  • Makes sense. Put a working example as an answer and I'll accept it.
    – KidBilly
    Commented Jan 2, 2020 at 16:28

2 Answers 2

Reset to default
5

As I told in my comment above you could use a callback when the Invisible Recaptcha is rendered.

Try this code out and let me know if it worked:

<!doctype html>
<html>
  <head>
    <script>
        var onSubmit = function(token) {
            console.log(token);
            // You can check token here and decide what to do
        };

        var onloadCallback = function() {
            grecaptcha.render('form-submit-btn', {
                'sitekey' : '***************',
                'callback' : onSubmit
            });
            document.getElementById('form-submit-btn').disabled = true;
        };

        /////
        // code to enable your button when you have content in the inputs
        /////
    </script>
  </head>
  <body>
      <form action="/action_page.php" id="referral-form">
          First name:
         <br>
         <input type="text" name="firstname">
         <br>
         Last name:
         <br>
         <input type="text" name="lastname">
         <br>
         <input type="submit" id="form-submit-btn" class="g-recaptcha" value="Submit">
      </form>

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

I based this example on your code and this example in Google Recaptcha's documentation.

Improve this answer
4
  • 1
    Hmm, can you try putting document.getElementById('form-submit-btn').disabled = true; after the render line?
    – Mihail Minkov
    Commented Jan 2, 2020 at 16:57
  • When the user click the submit button, nothing happens, what code should i add so the submit works please ?
    – Mohamed Masmoudi
    Commented Oct 1, 2020 at 6:50
  • 1
    It would seem your button is disabled, you should get the recaptcha if everything is configured correctly. You could create a question for that specific case or look for similar cases.
    – Mihail Minkov
    Commented Oct 1, 2020 at 17:25
  • Yes i did already created a question, but no good answer. stackoverflow.com/questions/64136658/…
    – Mohamed Masmoudi
    Commented Oct 1, 2020 at 21:03
0

To resolve this issue i have upgraded to reCaptcha v3, very easy to integrate and now i changed the submit from <input type="submit" to .... The result is that the form now works perfectly.

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.