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

user_5641227 0
Viewed 30980

Hi i found an answer to this for a single field form... but what if we have a form with multiple field?

this is fine for disabling it if you have 1 field but it does not work when you want to disable it based on many fields:

getInitialState() {
    return {email: ''}
  },
  handleChange(e) {
    this.setState({email: e.target.value})
  },
  render() {
    return <div>
      <input name="email" value={this.state.email} onChange={this.handleChange}/>
      <button type="button" disabled={!this.state.email}>Button</button>
    </div>
  }
})
reactjs javascript
5 Answers

This is how I'd do it by only rendering the normal button element if and only if all input fields are filled where all the states for my input elements are true. Else, it will render a disabled button.

Below is an example incorporating the useState hook and creating a component SubmitButton with the if statement.

import React, { useState } from 'react';

export function App() {
  const [firstname, setFirstname] = useState('');
  const [lastname, setLastname] = useState('');
  const [email, setEmail] = useState('');
    
  function SubmitButton(){
    if (firstname && lastname && email){
      return <button type="button">Button</button>
    } else {
      return <button type="button" disabled>Button</button>
    };
  };

  return (
    <div>
      <input value={email} onChange={ e => setEmail(e.target.value)}/>
      <input value={firstname} onChange={ e => setFirstname(e.target.value)}/>
      <input value={lastname} onChange={ e => setLastname(e.target.value)}/>
      <SubmitButton/>
    </div>
  );
};
user_73677150

This might help. (credits - https://goshakkk.name/form-recipe-disable-submit-button-react/)

import React from "react";
import ReactDOM from "react-dom";

class SignUpForm extends React.Component {
  constructor() {
    super();
    this.state = {
      email: "",
      password: ""
    };
  }

  handleEmailChange = evt => {
    this.setState({ email: evt.target.value });
  };

  handlePasswordChange = evt => {
    this.setState({ password: evt.target.value });
  };

  handleSubmit = () => {
    const { email, password } = this.state;
    alert(`Signed up with email: ${email} password: ${password}`);
  };

  render() {
    const { email, password } = this.state;
    const isEnabled = email.length > 0 && password.length > 0;
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          placeholder="Enter email"
          value={this.state.email}
          onChange={this.handleEmailChange}
        />
        <input
          type="password"
          placeholder="Enter password"
          value={this.state.password}
          onChange={this.handlePasswordChange}
        />
        <button disabled={!isEnabled}>Sign up</button>
      </form>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<SignUpForm />, rootElement);
user_91495030 
  export default function SignUpForm() {

    const [firstName, onChangeFirstName] = useState("");
    const [lastName, onChangeLastName] = useState("");
    const [phoneNumber, onChangePhoneNumber] = useState("");

    const areAllFieldsFilled = (firstName != "") && (lastName != "") && (phoneNumber != "")

    return (
      <Button
        title="SUBMIT"
        disabled={!areAllFieldsFilled}
        onPress={() => {
          signIn()
        }
        }
      />
    )
    }

Similar approach as Shafie Mukhre's!

user_138498890
Related