Installing Inertia from Scratch
This episode is for members only

Sign up to access "Installing Inertia from Scratch" right now.

Get started
Already a member? Sign in to continue
Playing
13. Form callbacks and resetting the form

Episodes

0%
Your progress
  • Total: 1h 7m
  • Played: 0m
  • Remaining: 1h 7m
Join or sign in to track your progress

Transcript

00:00
We saw in the last episode that if we go ahead and post something successfully, it doesn't really look like anything has happened, even though it has.
00:07
Now, eventually, we're going to get our list of posts down here. So we will see that roll in. But what we really want to do is update what happens when we have a successful form post.
00:18
And there's a couple of things, a couple of options that we can add to here. But for now, we're going to look on success. You can see there that via that we've got on cancel, on error, on finish, everything that we could possibly need to control our forms.
00:33
But we're interested in on success just for now. So on success, we might want to do a number of number of things. We might want to flash a message to show that this has been posted. But at the moment, what we want to do is just reset the form.
00:48
What we can do is say form reset, and that's going to reset this back to the original values that we've provided here. So effectively, that will just clear the form out for us. If we had other things that we could post in here as well,
01:02
they would also be returned back to their defaults. So that makes it a little bit nicer when we type something, hit post, that form gets cleared out, ready for the next message. So we've now posted two things.
01:15
And now I'm going to get rid of them just for now. There are other things that we can do in here as well. And I'm going to show you one of these, because this is probably something that you're going to use very often.
01:24
So the first thing I'm going to do is just set a height on here of some random value. So let's just say a thousand pixels just so we get a little bit of scroll. I'm actually going to increase that a little bit more here.
01:36
OK, so the next really important thing that you're probably going to always include when you post forms is preserve scroll. Now, if we explicitly set this to false, let's just look what happens
01:50
if we scroll down a little bit, assuming our form is maybe a little bit further down on the page, maybe underneath the content. If I type something and hit post, you can see that we jump back up to the top of the page.
02:03
That's a normal thing because the content is being re-rendered and it would jump you to the top of the page. And that's pretty standard. But what we really want to do is preserve the scroll.
02:12
So wherever the form is on the page, this always stays in the same position. It feels more like an app rather than a refresh of the entire page. So if I go ahead and type this now and hit post, you can see we stay in exactly exactly the same position.
02:27
So that's probably really useful if you have forms further down the page or if you have some sort of button that does something and you don't want the user to be jumped to the very top of the page every single time.
02:38
So now that we've demoed that, I'm just going to go ahead and get rid of this height in here that we just used to demo that. And let's go ahead and look in the next episode outputting all of the posts from the database.

Episode summary

In this episode, we focus on making our form feel much more interactive and user-friendly after a successful post. We start by noticing that, by default, nothing much happens visually when a form is posted. Of course, under the hood, things are working, but it would be nice for the user to actually see some feedback.

We explore the various callbacks available for the form—such as onSuccess, onCancel, onError, and onFinish—but we zero in on onSuccess for now. The first improvement we make is to automatically reset the form after a successful post, clearing out any values the user entered. This makes it ready for the next message without needing a manual refresh.

Next, we talk about scroll position. Sometimes, when you post a form that's down the page, the default behavior jumps you right back to the top, which can be really jarring. We demonstrate this by setting an exaggerated height on the container, then show how you can use the preserveScroll option so the user's scroll position isn't lost after posting the form. This way, the experience feels a lot more like a real app, where things stay where you left them, instead of blinking back to the top every time you interact.

We wrap up the episode by cleaning up our demo and preview what's coming next: we'll look at how to output all the posts from the database so that new posts actually show up for everyone to see!

Episode discussion

No comments, yet. Be the first!