CODEWITHSUNDEEP
reactjsonclick
Aib Syed
Aib Syed

Reputation: 3196

Is there a way to clear form input and keep input state? (Code example within)

I have a form that uses the current state of input fields to display values on page after submit.

The problem is that I don't want these fields to be accessible after submit.

I have already tried disabling the form after submit, but this is not enough. The user can simply press submit again and the fields will again be accessible.

export default class Contact extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      firstname: '',
      lastname: '',
      disabled: false,
      submitted: false
    };
  }

  handleChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleFreezeClick = e => {
    this.setState({ disabled: !this.state.disabled });
  };

  handleSubmit = e => {
    const {
      firstname,
      lastname,
      disabled,
      submitted
    } = this.state;
    this.setState({ submitted: true });
    e.preventDefault();
  };

  render() {
    const {
      firstname,
      lastname,
      disabled,
      submitted
    } = this.state;
    return (
        <section className="section">
          <div className="container">
            <div className="content">
              <h1>Form</h1>
              <form
                name="formtest"
                method="post"
                action="www.google.com/"
                disabled={this.state.disabled}
                onSubmit={this.handleSubmit}
              >
                <div className="field">
                  <label className="label" htmlFor="firstname">
                    First Name
                  </label>
                  <div className="control">
                    <input
                      className="input"
                      type="text"
                      name="firstname"
                      value={this.state.firstname}
                      onChange={this.handleChange}
                      defaultValue="Doctor"
                      disabled={this.state.disabled}
                      required={true}
                    />
                  </div>
                </div>
                <div className="field">
                  <label className="label" htmlFor="lastname">
                    Last Name
                  </label>
                  <div className="control">
                    <input
                      className="input"
                      type="text"
                      name="lastname"
                      value={this.state.lastname}
                      onChange={this.handleChange}
                      defaultValue="Tenma"
                      disabled={this.state.disabled}
                      required={true}
                    />
                  </div>
                </div>
                <div className="field">
                  <button
                    onClick={this.handleFreezeClick.bind(this)}
                    className="btn"
                    type="submit"
                  >
                    Submit
                  </button>
                </div>
              </form>
            </div>
          </div>
        </section>

        <section>
          <div className="container">
            <div className="content">
              {submitted ? (
                <p>{`Hello ${firstname} ${lastname}`}</p>
              ) : null}
            </div>
          </div>
        </section>

Ideal result should clear all input fields onSubmit and still display results on page after input fields have been cleared.

Upvotes: 0

Views: 77

Answers (3)

Gunjan Bothra
Gunjan Bothra

Reputation: 21

I have made few changes in your code snippet-

1) Add fullName propery in this.state.

2) In handleSubmit function when you are setting the state of button submission, also set the state of fullName, firstName and lastName like below

const fullName = firstname + ' ' + lastname;
this.setState({ submitted: true, fullName: firstname + ' ' + lastname, firstname: '',  
lastname: '' });

This will clear you input fields and also we are storing input values to the field name fullName.

3) Change your binding in . Instead of binding firstname and lastname bind it with fullName property. Like below

{submitted ? (

{Hello ${this.state.fullName}}

) : null}

Hope this will resolve your problem.

Upvotes: 0

user11910739
user11910739

Reputation:

You have to disable the Submit button as well.

  <button
    onClick={this.handleFreezeClick}
    className="btn"
    type="submit"
    disabled={submitted} // add it in your code
  >
    Submit
  </button>

Upvotes: 2

tareq aziz
tareq aziz

Reputation: 777

I think you can change your handleSubmit like this way

    handleSubmit = e => {
    e.preventDefault();
    const {
      firstname,
      lastname,
      disabled,
      submitted,
    } = this.state;
    this.setState({ submitted: true, disabled: true });
};

And button tag too

<button disabled={this.state.disabled} className="btn">Submit</button>

Upvotes: 0

Related Questions