Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to disable form submit button until all input fields are filled in ReactJS?

I want to send a form so I created a function for that. I have a submit form , and the button should not enable until all fields of the form are fully filled.

All validations are working but this is not a problem, I need it for an onclick event.

My code works but when I click the checkbox one time to make it true and click again to make it false, the button should be disabled, but again it will be enabled.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

const [name, setName] = useState("");
  const [surname, setSurname] = useState("");
  const [email, setEmail] = useState("");
  const [checkbox, setCheckbox] = useState(false);
  let handleSubmit = async (e) => {
    e.preventDefault();
    try {
      ...
    }
  };
return(
<Input
                      required
                      type="text"
                      value={name}
                      placeholder="İsim"
                      onChange={(e) => setName(e.target.value)}
                    />
<Input
                      required
                      type="text"
                      value={surname}
                      placeholder="Soyisim"
                      onChange={(e) => setSurname(e.target.value)}
                    />
<Input
                      required
                      type="email"
                      placeholder="E-mail"
                      onChange={(e) => setEmail(e.target.value)}
                    />
<Input
                      type="checkbox"
                      required
                      value={checkbox}
                      onChange={(e) => setCheckbox(e.target.value)}
                    />
<input
                  type="submit"
                  name="Onaylıyorum"
                  disabled={!name || !surname || !email || !checkbox}
                />

>Solution :

For the checkbox you have to change from value prop to the checked prop and access event.target.checked instead i.e

 <input type="checkbox" checked={checkbox} onChange={(e) => setCheckbox(e.target.checked)} />

The react docs have an example too

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading