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=".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.
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./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.
- 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. – Bill Kindig Commented Jan 2, 2020 at 16:28
2 Answers
Reset to default 5As I told in my ment 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./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.
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.