I'm attempting to remove a css class btn-disabled from the input button element when someone verifies their entry to the form.
I currently created a function called enableForm to remove the CSS class btn-disabled when reCAPTCHA is verified.
At the moment my CSS class does not get removed which doesn't allow the form to submit. My console.log yes is appearing so the function is being called but I am not able to remove the CSS class. This method was working previously using regular javascript now I'm attempting to do the same on nextjs. How can I remove my CSS class on the success of reCAPTCHA?
Here is my code snippet:
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>
)
}
btn-disabled has CSS properties of :
.btn-disabled {cursor:not-allowed;opacity:0.5;text-decoration:none;pointer-events: none;}
You can manage in a better way the classes based on the value of your state
import ReCAPTCHA from "react-google-recaptcha";
const TopForm = () => {
const [isActive, setIsActive] = useState(false);
const enableForm = function () {
console.log('yes')
setIsActive(true)
};
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={`constant1 ${isActive ? "active" : ""} btn-alternative width-inherit margin-left-0`}
/>
</div>
)
In your function, you accidentally have made the mistake of assigning a function rather than calling it.
Here is what it should be:
const enableForm = function () {
console.log('yes')
document.getElementById("btnSubmit").classList.remove("btn-disabled");
};
It should work now.