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
11. Posting forms with Inertia

Episodes

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

Transcript

00:00
So let's start out with a form in here. We don't need an action for this.
00:04
We're going to go ahead and trigger inertia to post through to a route for us when this form is submitted. So go ahead and fill out some basic information first, like the body in here, and we'll go ahead and add in a text area.
00:18
So let's set the name of this to body, the ID of this to body, and we can get rid of the columns here and maybe just set the rows to something like four. We'll go ahead and give this a class with a border
00:32
and we'll set the width to full. We're not going to make this look amazing, but we'll just create something that we'll do for now. So of course, we can now type into this body.
00:41
Let's also add maybe a little bit of padding to this. You can also bring in the Tailwind forms plugin, which will make your forms look a little bit nicer as well by default.
00:49
Okay, so lastly, we just need a button type of submit and we just want to say something like post. So that should be able to post through to where we need it to. Of course, at the moment, it's just posting through
01:00
to the page itself, which isn't great because we're working within a single page app. So what we want to do is hook this up to actually submit through to our backend.
01:09
Before we actually hook this up on the front end, we want to go ahead and create out a new route that is actually going to go ahead and store this. So let's create out a controller to handle this
01:21
and that's going to be post store controller. You can put two things in the same controller if you want to, but we're going to go ahead and switch this over to post
01:30
and we're going to post through to posts, switch this to post store controller and let's open that up, add in an invoke and let's just die dump works just to see
01:42
that this is actually submitting through. So how do we work with forms in Inertia if you are new to Inertia? Let's go ahead and bring in our script section here
01:51
and we're going to go ahead and import use form and that's going to come from Inertia JS V3. What we can now do is create out a form in here using this composable and we can inside of this object
02:05
give all of the properties that we want to submit through to the backend. Then what we can do is hook these up with a V model and then just submit this form
02:14
and then handle anything that comes from that like validation or what happens when it's successful. So let's go ahead and hook up our text area with a V model to form.body.
02:28
So that's hooked that up now. So every time we type inside that text area, this data will be updated with what we have. What we can then do is over on the form,
02:37
we can say that when this is submitted and we want to prevent the default behavior of that actually submitting through, we want to call a method in here
02:46
to actually post this through. So we can just call this method post or this function post. And down here, we can create out a post function,
02:54
which of course we'll go ahead and submit that form posted through. How do we do that? Well, we just use the form that we've just created
03:02
and we post through to a particular route. Now the question is, of course we have slash post, but can we use our route helper that we added earlier using Ziggy?
03:14
And the answer is yes. So let's say that this was called posts.store. If we head over to our web routes, we can actually name this posts.store.
03:25
And then of course, that makes it a little bit more convenient. Now we don't have to go through to the actual URL. Okay, so that should be enough to get that working
03:33
and see that die dump. Let's just type something in here and hit post. And there we go. We get that die dumped work.
03:38
So we know that this form is now being submitted through to the backend. We could even go ahead and update the post store controller to actually create this.
03:47
So this is just going to work as it normally would in an application. So we could go ahead and say post create, and we could go ahead and say request only body.
04:00
And then with inertia, what we want to do is return back. So it goes back to the previous page, loads in any information that you need,
04:08
works just like a normal Laravel app. So now what we can do is if we just keep an eye on our posts database, we could say something in here,
04:18
hit post that's actually sent a request through to that. And it's gone ahead and stored that in the database. So we still got a little bit of work to do because of course we're not showing any post.
04:26
This is still hanging around. It doesn't look great. So we're going to head over to the next episode where first of all, we're going to look at validation.

Episode summary

In this episode, we're diving into how to handle form submissions with Inertia.js in a Laravel app. We start by building a basic form with a textarea for the body of the post (nothing fancy, just enough to get us going), and styling it a bit using Tailwind. Then, we add a submit button to allow users to post their content.

Next up, instead of just letting the browser handle the form submission in the old-fashioned way, we set things up so Inertia can capture the submit event and send the form data to the backend using an AJAX request. To do this, we use the useForm composable from Inertia (imported in our script), which makes managing form state and submissions super easy.

We wire everything up: the textarea is connected to our form data with v-model, and the form's submit event triggers a custom post method. On the backend, we add a simple controller and route that catches the POST request. We first just dump the data to make sure it's coming through, then switch to actually creating a new post in the database using Laravel's request handling.

By the end of the episode, we have form data being sent to the backend, posts being created in the database, and everything is hooked up nicely with Inertia. It's not quite production-ready (we don’t yet handle validation or updates to the post list), but it’s a very solid start. Next time, we'll tackle form validation and making things look and work even better!

Episode discussion

No comments, yet. Be the first!