Remove css class from element when reCAPTCHA is successful

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;}

CodePudding user response：

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.

CodePudding user response：

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>
)