Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reset to the original data state #9

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Reset to the original data state #9

wants to merge 1 commit into from

Conversation

atorscho
Copy link

In case some of the form data properties is not an empty string (empty array, object...). This way it will really reset the form data.

@atorscho
Reset to the original data state
750b1a5 
In case some of the form data properties is not an empty string (empty array, object...). This way it will really reset the form data.
@frozonfreak frozonfreak mentioned this pull request Aug 7, 2017
Closed
@mtchuenten
Copy link

mtchuenten commented Nov 1, 2018 •
edited
Loading

Nice one @atorscho . I stumbled on this issue yesterday when I wanted to update a form (student info) in an app I'm building, meaning the form comes pre-populated with previously saved data (using the v-model directive in a vue component).

Now in the middle of my editing, I realized I had also touched some fields I didn't initially intend to modify, and I didn't want to close the form, open it again and start editing from afresh. "No problem" I thought, I have my reset button, and it calls the form.reset() method; why not just click it? Oops! There's a problem after all: My form is now blank.

My first instinct was to leave the form reset() method as is (for those who may want to completely clear the form), create another one called restore() with the modification you mentioned (this[field] = this.originalData[field];), and call form.restore() instead of form.reset(). But then I realized I was giving this too much of a thought... It's actually better to just modify the form.reset() method as you did, the reason being that in the code snippet below, the reset button will always reset the form to its original data state, and that's the default html behaviour, which "I think" we are trying to replicate here.

That being said, my greatest thanks go to @JeffreyWay . That's some great abstractions you've achieved and I've been using your Form.js and Errors.js classes since I followed your tutorials on @laracasts . It took me some time to wrap my brain around them, but it was worth it and I'm reaping the benefits now. Thanks a lot.

<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<form>
		<input type="text" name="firstname" value="Martial">
		<input type="text" name="lastname">

		<button type="reset">reset</button>
	</form>
</body>
</html>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@atorscho @mtchuenten