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
08. Submitting forms

Episodes

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

Transcript

00:00
So this is where we start to see how Inertia really nicely brings everything together.
00:05
Not only are we going to submit our form in this episode, we're also going to see as part of the submission and redirection process, the data inside of here automatically update. And I'll go into that in a little bit more detail in a minute. OK, so we're going to go over to our form here and just get rid of the form that we're dumping out.
00:25
Now we're going to add an event handler to our overall form to call a method to go ahead and submit this. So we're going to go ahead and say v on submit. Really importantly, we want to prevent the default behavior because we don't actually want this to submit through and make an actual request. And then we're just going to call a method, any method that we want.
00:44
So let's call this create post. So I'm going to go ahead and create this method just up here underneath our form. So this is just a standard function that we are calling. Let's call this create post. And this is where we submit everything that's being stored inside of this form. Now, we don't have a route that actually creates a post out at the moment. So let's go ahead and
01:07
build that first and then we'll hook this up. So we're going to go ahead and make out a controller in here called post store controller. And I'm kind of mixing the terms up between post and comment here. Let's just roll with comment for now, just to keep things a bit more consistent. So comment store controller. And let's go over to our web routes. And again, just do this exactly
01:31
the same as we normally would. So we're going to go ahead and make a post request here through to comments. We're going to use that comment store controller and we're just going to give this a name comments.store. So over in the comment store controller, again, we can do everything that we would normally do within Laravel. The first thing that we want to make sure is that the user is
01:51
authenticated. So we can add our middleware in here at the root level. It doesn't really matter. So we're going to say auth. Next, we'll create our invoke magic method and we'll just get our request in as normal. So again, nothing is different here. So we can validate in here, which we're going to look at very shortly, but we just want to go ahead and create this post now just to see how everything
02:12
hooks up together. So we're going to go ahead and request the currently authenticated user. Then we don't have a relationship for this. So let's build this out really quickly. A user has many posts. So let's say this has many posts. So from here, we can go ahead and say user posts create, and then from the request, which eventually
02:42
inertia is going to pass down to this, we can grab the data that we need. So in our case, it's just the body, but that could be anything. Now, this part is crucial. What do we do here? Because technically we're not making a separate request to this page when we submit the form. So surely writing something like return back, like we would normally do, doesn't make much sense. Well, actually what's
03:05
going to happen here is inertia will intercept this and it's not going to actually redirect the user back. So if you've ever used this, you'll know that it redirects. What inertia will do is instead go back to the previous page. So it will come back to this page. It won't reload the entire page, but it will re-fetch the data for the page that we are currently on. So in that case, that's our
03:29
common index controller, and it will just re-fetch by default everything inside of here. What that means is once we have submitted this and stored the post and we go back to this page, the new props will get sent down to this component and we'll see everything update without the page technically refreshing at all. So the last thing to do is actually hook our form up to go ahead and store
03:54
this and then we'll see everything that I've just explained in action. Then we'll go ahead and check out the network tab to actually see what's happening behind the scenes. So once we submit this form and we call this create post function, how do we submit the form that we've built here? Well, we just say form and then we have a load of methods that we can use to go through.
04:14
So we can post, we can get, we can delete, we can patch, anything that you would normally do. So in our case, this is posting through to the comments route and that's it. That's all we need to do for now. Because we've already got the data filled into this form, this will take care of sending that through to our comment store controller. It'll of course get picked up in the request and
04:39
we can just go ahead and store this like we normally would. So let's head over and try this out. So I'm going to say hello, hit post and there we go. There was absolutely no page refresh there. Like I said before, Inertia is taking this redirect as re-rendering the comments page and passing down the most recent data. In which case we see the newly created comment. Let's try that again with
05:04
the network tab open just so we can see what's going on. The first request to this page has no XHR request because we're just landing on a page and rendering this content now. But if we look at this now and I say hi there and hit post, this is making a couple of requests. The first one is going ahead and posting this through. The second one is going ahead and re-rendering the content. So this
05:27
gets a 302 redirect. If we look at the headers here or the payload, you can see that the body is being sent through. This redirects us back to the main page, the comment page. But this now contains, if we look at the preview here, the new props in here. So we've now got all of the posts that includes the new post that we just created. So just with a series of requests here is just
05:53
updating the data that we see on the page via that redirect. Okay, so hopefully the way this is now working is a little bit clearer. What we're going to do, though, over the next couple of episodes is just look at some other stuff around forms. For example, at the moment, the comment that I have posted in here after I hit post is hanging around.

Episode summary

In this episode, we dive into how Inertia handles form submission and shows off its ability to update the page without a full reload. First up, we take our comment form and hook it up so it actually submits data using an event handler and a method named createPost. Instead of a normal browser form submission (which would reload the page), we prevent default behavior and handle everything with JavaScript and Inertia.

We then set up a new controller in Laravel (the CommentStoreController) and add the appropriate route to handle storing comments. Once that's ready, we use Inertia to send the form data—just like a regular API request—using the form.post() method. After the form is submitted, Inertia intercepts the redirect and instead of reloading the entire page, it re-fetches the data just for the current component. This means you see your new comment show up right away, and the page never actually refreshes.

We check out what's happening in the Network tab, walking through the behind-the-scenes requests: first the submission, then the data re-fetch that provides the updated props including the new comment. All of this happens smoothly without any full-page reloads, making for a much snappier user experience.

Finally, we hint at future tweaks—like clearing the form after submission—to make our form handling even better. If you've ever wondered how to get that Single Page Application feel while still using Laravel and server-side routing, this episode shows exactly how Inertia makes it work.

Episode discussion

No comments, yet. Be the first!