0

How can I remove the Input data after submitting the form?

import React from 'react';
import { Form } from 'react-bootstrap';

const AddItem = () => {


    const handleItemSubmit = (event) => {
        event.preventDefault();
        const carName = event.target.carName.value;
        const companyName = event.target.companyName.value;
        console.log(carName, companyName);

    }
    return (
        <div className='w-50 mx-auto mt-5 py-5 d-block'>
            <Form onSubmit={handleItemSubmit}>
                <Form.Group className="mb-3" controlId="formBasicCarName">
                    <Form.Control name="carName" type="text" placeholder="Enter Car Model Name" />
                </Form.Group>

                <Form.Group className="mb-3" controlId="formBasicCompany">
                    <Form.Control name="companyName" type="text" placeholder="Enter Company Name" />
                </Form.Group>
                <button className='btn btn-primary' variant="primary" type="submit">
                    Submit
                </button>
            </Form>
        </div>
    );
};

export default AddItem;

Here I Took two input and get the data by using OnSubmit. Ant I can get the data easily. But I want to reset the value after submit with same button called "submit".

1

4 Answers 4

1

So, In order to remove the reset the form you should use the controlled forms. By controlled forms i mean using the states to change form inputs. And that's the recommended way and best practice.

so if you'll have to re-write your your code it'll look something like this.

    import React ,{useState} from 'react';  // import useState hook
    import { Form } from 'react-bootstrap';
    
    const AddItem = () => {
    // Initialise  Values with empty string or null;
    const [inputeVal, setInputVal] = useState({
       carName:"",
       companyName:"",
    });
    
   const handleChange = (event)=>{
   const {name, value} = event.target;
   setInputVal({...inputVal, [name]:value}) // will set the values from input field to relevant state

   }
    
   const handleItemSubmit = () => {
      // your handle submit logic goes here 

     // after submit you can reset the form by resetting the states

     setInputVal({
        carName:"",
        companyName:"",
     })
    
        }
        return (
            <div className='w-50 mx-auto mt-5 py-5 d-block'>
                <Form onSubmit={handleItemSubmit}>
                    <Form.Group className="mb-3" controlId="formBasicCarName">
                        <Form.Control onChange={handleChange} value={inputVal?.carName} name="carName" type="text" placeholder="Enter Car Model Name" />
                    </Form.Group>
    
                    <Form.Group className="mb-3" controlId="formBasicCompany">
                        <Form.Control onChange={handleChange} value={inputVal?.companyName} name="companyName" type="text" placeholder="Enter Company Name" />
                    </Form.Group>
                    <button className='btn btn-primary' variant="primary" type="submit">
                        Submit
                    </button>
                </Form>
            </div>
        );
    };
    
    export default AddItem;
Sign up to request clarification or add additional context in comments.

Comments

1

Just add at the end of function

event.target.reset();

Comments

0

reset the form like this:

const handleItemSubmit = (event) => {
     event.preventDefault();
     const carName = event.target.carName.value;
     const companyName = event.target.companyName.value;
     console.log(carName, companyName);
     event.target.reset(); //add this line
}

Comments

0

Easy fix is to reset the form like this.

  const handleItemSubmit = (event) => {
    event.preventDefault();
    const carName = event.target.carName.value;
    const companyName = event.target.companyName.value;
    console.log(carName, companyName);
    event.target.carName = "";
    const inputField = document.getElementById("form");
    inputField.reset();
  };

And don't forget to Provide the id to your form

<Form onSubmit={handleItemSubmit} id="form">

However, i will highly suggest you to look into callmeizaz answer above about the useState. Thats the proper way to handle form

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.