question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Reset a form programmatically

See original GitHub issue

Are you submitting a bug report or a feature request?

Feature request

Other information

I might missing something, but what is the correct approach to reset a form after successful submission? Without having a reset button of course. I couldn’t see anything about this in the documentation. I can inject new empty initialValues from props maybe, but it doesn’t seem very clean.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:17 (5 by maintainers)

github_iconTop GitHub Comments

5reactions
dbertellacommented, Dec 14, 2017

Clojure did the job, I tried the event first but it didn’t work with reset, I guess it’s not handled via a custom event, I was thinking at something like this document.getElementById('myForm').dispatchEvent(new Event('reset'))

Anyway here is my code, it feels a little hacky but it does the job!

let resetForm

class MyComp extends React.Component {
  componentWillReceiveProps(nextProps: Props) {
    if (!this.props.success && nextProps.success) {
      resetForm()
    }
  }

  render() {
       <Form render={({ handleSubmit, reset, values }) => {
            resetForm = reset
            return (
                <form onSubmit={handleSubmit}>
                ....
                </form>
            )
        } />
  }
}
1reaction
rendomnetcommented, Jul 2, 2019

Anyone react hooks way?

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to reset a form programmatically? - jquery - Stack Overflow
The accepted answer to that question is just setting the input fields to blank, but a true reset sets all input fields to...
Read more >
HTML DOM Form reset() Method - W3Schools
The reset() method resets the values of all elements in a form (same as clicking the Reset button). Tip: Use the submit() method...
Read more >
How to reset a form - Flavio Copes
You can programmatically reset a form using JavaScript, too. All you need is the form element reference: const form = document.
Read more >
How to reset a form using jQuery with .reset() method?
JavaScript reset(): The reset() method resets the values of all elements in a form (same as clicking the Reset button).
Read more >
HTMLFormElement.reset() - Web APIs | MDN
The HTMLFormElement.reset() method restores a form element's default values. This method does the same thing as clicking the form's <input ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found