Question 249872 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Disabling the submit button when there is no input/data

Currently the submit button is active and shows an error message when its clicked with no data, but I want to change this so that the submit button is disabled until there is data.

               <Button
                onClick={submitId}
                loading={isLoading}
                type="submit"
                disabled={}
              >
                Submit
              </Button>

const submitId = async () => {
    setIsLoading(true);
    const result = await executeId(a, b);
    if (result) {
      available.custom.push(`${Name}.model`);
      setServiceResult(`${Name} created`);
    } else {
      setServiceResult("failed");
    }
    setIsLoading(false);
  };

  const [isLoading, setIsLoading] = useState(false);
Tags:

2

Answers


  1. 0

    Validate the data and pass the result to disabled prop

    <Button
  onClick={submitId}
  loading={isLoading}
  type="submit"
  disabled={!a && !b}
>
  Submit
</Button>
    Login or Signup to reply.
  2. 0

    The other answer is correct. You need to check in your disabled attribute to whether your value is valid.

    If you are using a <form> might want to add required to the input field.

    Doing that will block submissions until the field has a value (documentation).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search