Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
09. Resetting forms

Episodes

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

Transcript

00:00
From the last episode, we saw that the text that we'd enter into the text area
00:04
hangs around even after this has been submitted. Now, at this point, that should be pretty obvious. It's because we're not doing a full page reload. Instead, we're just re-rendering this component and the data within it,
00:15
which means that we see these comments, but anything like form state tends to just hang around. So what we're now going to do is look at probably the most used option that you're going to pass through when you are submitting forms.
00:28
Now, we pass these options through to the second argument of whatever we're doing with a form. And there's a ton of things that you can do in here, which we'll be exploring later.
00:38
But most of the time you're going to be using on success. So this is like a callback to when this form was successfully posted. And you can do anything in here. It doesn't matter what you put in here.
00:51
You might want to clear stuff up. You might want to flash a message, which we'll be looking at later as well. But for now, what we want to do is just clear the form out, reset the form. Well, let's take a look at how we might think we'd originally do this.
01:03
We know that form body is accessible as a property on here. So let's try this out first, form body. And let's just send this back to an empty string. This is probably what you would do in a normal view application
01:15
without a form helper like this, if you were working with some sort of ref or reactive object. So let's just write something in here, hit post. And you can see, sure enough, that does work.
01:26
But this is a little bit cumbersome if you have more data in your form. What you really want to do is lean on some of the helpers that Inertia gives you within its form helper. And one of them is reset,
01:38
which is basically just going to reset this back to the original data you included inside of the use form object. So let's take a look at this in action. I'm just going to say hello again, hit post.
01:50
That gets reset, but the difference between setting this manually back to an empty string and using reset is if you had any kind of default value inside of here, reset will set it back to the original value you had in here.
02:05
This is really useful when you are pre-populating data in here that you want to keep. You don't want to just set it back to an empty string. And you can actually see that when you look at the profile section
02:18
of Laravel Breeze. So just as a really quick example, let's head over to the profile update form and let's take a look at what we get here.
02:29
So you can see we've got a form in here which contains the user's name and the user's email by default. When this form gets submitted, we don't want to clear out the name and email
02:39
because that would, if we head over to the profile section, that would get rid of the name and the email after the user had hit save. So instead, by resetting this,
02:48
it will set it back to the default values or the new values once they get reloaded. Okay, so let's go ahead and set this to ABC. Just see how that actually looks in practice
03:00
and then we're pretty much done. So this says ABC. I'm going to get rid of it and change that out. Hit post and there we go.
03:06
You can see it changes back to the original value. So as well as being a lot cleaner, this is also really helpful if you have any default values inside of your forms.
28 episodes•2 hrs 20 mins

Overview

Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API.

Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API.

To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.