Enter Form Input Value and Enable Submit Button in React JS

React JS is a popular JavaScript library for building user interfaces. One common task in React JS applications is handling form input values and enabling the submit button based on the input values. In this article, we will explore how to achieve this using HTML tags and the useState hook in React JS.

Form Input Value

To capture form input values in React JS, we can use the <input> tag. We can use the onChange event to capture the input value and update the state using the useState hook. Here’s an example:

      
        const [inputValue, setInputValue] = useState('');

        const handleInputChange = (e) => {
          setInputValue(e.target.value);
        }

        return (
          <input type="text" value={inputValue} onChange={handleInputChange} />
        )
      
    

In the above example, we define a state variable inputValue and a function setInputValue to update the state. We then use the onChange event to capture the input value and call the setInputValue function to update the state with the new value.

Enable Submit Button

Once we have captured the form input values, we can enable the submit button based on the input values. We can use the disabled attribute to enable or disable the submit button based on a condition. Here’s an example:

      
        const [inputValue, setInputValue] = useState('');
        const [isSubmitEnabled, setIsSubmitEnabled] = useState(false);

        const handleInputChange = (e) => {
          setInputValue(e.target.value);
          setIsSubmitEnabled(e.target.value !== '');
        }

        return (
          <div>
            <input type="text" value={inputValue} onChange={handleInputChange} />
            <button type="submit" disabled={!isSubmitEnabled}>Submit</button>
          </div>
        )
      
    

In the above example, we define a state variable isSubmitEnabled to keep track of whether the submit button should be enabled. We update the state in the handleInputChange function based on the input value. We then use the disabled attribute on the submit button to enable or disable it based on the isSubmitEnabled state variable.

By following these examples, you can easily handle form input values and enable the submit button in your React JS applications using HTML tags and the useState hook.