how to clear form after submit in next js?

user_15396796 0
Viewed 2389

here I have a contact form and i want all the values of form should be empty after submitting the form.
I have written following code.but this is not working after submitting the values of form remains same.
what is the problem here and how to solve it.

export default function contact() {

  const[name,setName]=useState("")
  const[phone,setPhone]=useState("")
  const[email,setEmail]=useState("")
  const[query,setQuery]=useState("")
  const [submitted, setSubmitted] = useState(false)

const  handleSubmit=(e)=>{
    e.preventDefault()
    console.log(e);
    let data = {
      name,
      email,
      phone,
      query
    }
    console.log(data);
    axios.post('http://127.0.0.1:8000/api/create/',data).then((res)=>{
      console.log(res);
      setSubmitted(true)
      setName('')
      setPhone('')
      setEmail('')
      setQuery('')
    })
  }
    return (
    <>
      <div>
        <h1>Contact Page</h1>
      </div>
        
        <div >    
           <form action="contact" method="post">
              <input name="name"  onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
              <input name="phone" onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
              <input name="email" onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
              <textarea name="text" onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
              <button onClick={(e)=>{handleSubmit(e)}} value="Send" >Submit </button>
          </form> 
               
                                
      </div>
    </>
    )
  }
next.js reactjs html javascript
3 Answers

Currently you are missing value prop in your inputs so your inputs are uncontrolled components that's why you are not able to clear them after form submit.

Try to add value prop like below:-

<input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
<input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
<input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
<textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
user_86655890

Add value prop your inputs then your form shall be cleared after submit:

<form>
    <input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
    <input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
    <input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
    <textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
</form>
user_108174370

First, make sure that your api-call ends successfully, according your code, you clean form only when request passed successfully :)

user_66026960
Related