I'm struggling with removing the CSS class btn-disabled from the input button element upon successful verification of a form entry.
I have implemented a function called enableForm to remove the btn-disabled CSS class when reCAPTCHA is verified.
However, despite my function being called (as indicated by the console.log output), I am unable to remove the CSS class which prevents the form from submitting. This used to work fine using regular JavaScript but now I'm facing issues in implementing it on nextjs. How can I successfully remove the CSS class once reCAPTCHA validation is successful?
Below is a snippet of my code:
import ReCAPTCHA from "react-google-recaptcha";
const TopForm = () => {
const enableForm = function() {
console.log('yes');
document.getElementById("btnSubmit").classList.remove("btn-disabled");
};
return (
<div>
<input
id="first_name"
maxlength="40"
name="first_name"
size="20"
type="text"
placeholder="First Name*"
className="field"
/>
<br />
<input
id="last_name"
maxlength="80"
name="last_name"
size="20"
type="text"
placeholder="Last Name*"
className="field"
/>
<ReCAPTCHA
sitekey="XXXXXX"
onChange={enableForm}
/>
<input
id="btnSubmit"
type="submit"
name="submit"
className="btn-disabled btn-alternative width-inherit margin-left-0"
/>
</div>
);
}
The CSS properties for the btn-disabled class are as follows:
.btn-disabled {cursor:not-allowed;opacity:0.5;text-decoration:none;pointer-events: none;}