Search code examples
javascriptrecaptcha

Google Recaptcha enables disabled submit button


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.


Solution

  • 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.