Develop Reference

how to clear form after submit in next js?

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>
</>
)
}

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 />

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>

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

I think a better way to do this is to rest the form using the .reset() method.
Like this:
document.getElementById("postCodeForm").reset();

button type='submit' with onClick

Which function, submit or onClick will run first? Or will they run simultaneously?
In my program onClick function runs first and then onSubmit. But why and is it always like that?
<Form onSubmit={handleSubmit}>
<Form.Field>
<label>Enter new password:</label>
<input
type="text"
name= 'newPassword'
onChange={handleOnChange}
placeholder='New Password'
required
/>
</Form.Field>
<Button type='submit' onClick={handleClick}>Submit</Button>
</Form>

If you are using formik you can pass handleSubmit to your button onClick and use your code and logics in the callback onSubmit
<Form onSubmit={(values) => yourHandleSubmitMethod(values)}>
<Form.Field>
<label>Enter new password:</label>
<input
type="text"
name= 'newPassword'
onChange={handleOnChange}
placeholder='New Password'
required
/>
</Form.Field>
<Button type='submit' onClick={handleSubmit}>Submit</Button>
</Form>

Form elements and associated labels

How to make associated labels for form elements in below code?
render() {
return (
<section className="col">
<div className="input-group">
<input type="text"
id="search-input"
ref="searchInput"
className="form-control"
placeholder="Filter location..."
onChange={this.handleChange} />
<span className="input-group-addon">Filter</span>
</div>
</section>
)
}

Use below.
<section className="col">
<div className="input-group">
<label for="search-input">Filter</label>
<input type="text"
id="search-input"
ref="searchInput"
className="form-control"
placeholder="Filter location..."
onChange={this.handleChange} />
</div>
</section>
Create label and give input elements id to label's for attribute

Reactjs default Form validation with event.preventDefault()

I do not want to submit form clicking on submit. So i am using :
onSubmit (e) {
e.preventDefault();
console.log(this.state);
}
<form className="loginform">
<h1 className="logo"><img src={images.Logo} /></h1>
<input
className="login"
placeholder="Username"
type="text"
required="true"
onBlur={(e) => { this.userName(e); }}
/>
<input className="login" placeholder="Password" type="password" required="true" />
<input
className="submit"
onClick={(e) => { this.onSubmit(e); }}
type="submit"
value="Submit"
/>
</form>
Doing so form validation is not working. I want to use default form validation with preventDefault.

You should use onsubmit form event:
<form className="loginform" onSubmit={this.onSubmit.bind(this)}>
<h1 className="logo"><img src={images.Logo} /></h1>
<input
className="login"
placeholder="Username"
type="text"
required="true"
onBlur={(e) => { this.userName(e); }}
/>
<input className="login" placeholder="Password" type="password" required="true" />
<input
className="submit"
type="submit"
value="Submit"
/>
</form>
In general you should avoid handling form submission via button onclick events, additional benefit of onsubmit is that it will also be fired on ENTER key submission.

Redux Form submit values without hitting submit

I am pretty sure that there is a way to do this with onChange, but in the example: http://redux-form.com/6.0.0-alpha.4/examples/simple/ here provided by redux form when you click the drop down and hit a value it automatically submits the value without having to hit submit.
I copied the exact code and everything works except for the fact that I have to choose all the values I want then hit submit. How do we make it to where we can just start typing in a field or select a value and it automatically get submitted as they have.
I will put the code below incase you do not want to visit the link.
import React from 'react'
import { Field, reduxForm } from 'redux-form'
const { DOM: { input, select, textarea } } = React
const SimpleForm = (props) => {
const { handleSubmit, pristine, reset, submitting } = props
return (
<form onSubmit={handleSubmit}>
<div>
<label>First Name</label>
<div>
<Field name="firstName" component={input} type="text" placeholder="First Name"/>
</div>
</div>
<div>
<label>Last Name</label>
<div>
<Field name="lastName" component={input} type="text" placeholder="Last Name"/>
</div>
</div>
<div>
<label>Email</label>
<div>
<Field name="email" component={input} type="email" placeholder="Email"/>
</div>
</div>
<div>
<label>Sex</label>
<div>
<label><Field name="sex" component={input} type="radio" value="male"/> Male</label>
<label><Field name="sex" component={input} type="radio" value="female"/> Female</label>
</div>
</div>
<div>
<label>Favorite Color</label>
<div>
<Field name="favoriteColor" component={select}>
<option></option>
<option value="ff0000">Red</option>
<option value="00ff00">Green</option>
<option value="0000ff">Blue</option>
</Field>
</div>
</div>
<div>
<label htmlFor="employed">Employed</label>
<div>
<Field name="employed" id="employed" component={input} type="checkbox"/>
</div>
</div>
<div>
<label>Notes</label>
<div>
<Field name="notes" component={textarea}/>
</div>
</div>
<div>
<button type="submit" disabled={pristine || submitting}>Submit</button>
<button type="button" disabled={pristine || submitting} onClick={reset}>Clear Values</button>
</div>
</form>
)
}
export default reduxForm({
form: 'simple' // a unique identifier for this form
})(SimpleForm)