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
07. Form basics

Episodes

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

Transcript

00:00
We've covered passing data down to our view and the best way that we can do that, that's going to be the most common thing that you're going to do within your Inertia apps. However, the second most common is going to be submitting forms. This is pretty much a part of every single application.
00:14
So how do we do this? Well, let's go over to our index here and let's build up a really simple form just at the top here. So I'm going to go ahead and create a format as usual. We're not going to use an action because we're not submitting this through in the traditional way.
00:29
Remember, we have a single page application where we technically need to post this data through like an API request. Now, we don't need to do that manually because Inertia will handle all of that for us. Let's build out a form without an action and without a method.
00:43
Now, I'm going to make this form kind of look like what we had here. So let's go and just add these classes onto here. And we'll also give this a padding of six as well. And this is now going to be our form that sits just at the top here.
00:56
OK, so inside of here, let's just build out the form elements like we normally would. We can give the text area a name of body. We can set an ID of body as well. And let's just bump down the rows that we have in here.
01:07
We'll also create a label for the body. So that's going to be the body. But I'm going to go ahead and just give this a SR only just so it disappears. OK, so for this text area, I'm just going to pull over some styles I already have in my notes.
01:22
Feel free to grab these if you're following along from the GitHub repository attached to this course. So that looks a lot better now. And we can obviously start to type in here. We're going to do the same thing for a submit button as well.
01:33
So let's create out a button with a type of submit. And we'll just say post. For the button again, I'm just going to pull over some pre-made styles, which you can grab.
01:42
And it looks something like that. So obviously, clicking this at the moment is going to submit this through in a traditional way. It's not set to post. So it's going to append everything to the query string.
01:53
This is not what we want to do. We want to eventually add in a JavaScript handler to this form like we normally would within a single page application or just in a client side application. And we want this to submit through to a route within our Laravel app.
02:09
But let's not get ahead of ourselves. What we're going to do now is look at how we even hook this form up to something that we can start to track the data in. Now, if we go up to the top here where the script section is,
02:22
remember I said earlier that pretty much everything you need to get pulled in with Inertia exists within this package here. Well, that's the same for all of our form functionality. So we actually have a use form helper that we can pull in from Inertia,
02:38
which will keep track of everything that you have written inside of a form. And then really crucially allow you to easily post this data through to the correct place. Now, that's not all it does. There are loads of other different things that you can do with that.
02:51
And we're going to be covering that in the next few episodes. Let's first of all, though, look at just hooking this form up and see how use form works. So just down here, we're going to go ahead and create a variable called form. Of course, you can give that any name you want.
03:05
And we're going to go ahead and invoke use form. Into this, we're just going to give all of the data within this specific form. We can have multiple forms on the page. For example, you might have a contact form on the same page
03:17
and you can have two in exactly the same page. It doesn't matter. So these aren't exclusively used once per page. Now, the data that we have within our form is just the body.
03:26
But again, we can add more. So if you were accepting a name in here as well, you would add this in here too. But we just have a body, which by default, we want to be an empty string. Now, within Vue, if you've worked with Vue, you'll know that you can hook up things
03:41
to refs or reactive objects using the model. So we do exactly the same thing here. We reference our form and we reference body inside of the form. Now, let's just head up to the top here and just dump that form out.
03:55
And we'll have a quick look at what we get. OK, so you can see here we've got quite a few properties. We've got the body itself, which is, of course, really important. We've got isDirty, errors, hasErrors, processing, and we've got some progress stuff as well
04:10
to do with file uploads specifically. We also have a couple of other properties that you can access at any other time if you need to see if this was successful or recently successful. But most of the time, you won't need to use them.
04:23
So the key thing here is that body keeps up now with any data that you actually put into this form. So we can say hello. And then when we post this, we can go ahead and submit this entire form through, which
04:35
will just send the body through to your Laravel API. And then you can just store this post as you normally would. So now that we've seen how to build a form up within Inertia, let's head over to the next episode and look at actually submitting this through and how this differs.

Episode summary

In this episode, we dive into the basics of working with forms in an Inertia application. First, we chat about how, after passing data down to your views, handling form submissions is one of the things you'll be doing all the time—pretty much every app needs some kind of form!

We start by building out a basic form at the top of our index. Instead of submitting the form in the traditional way (with an action and method), we talk about how, in a single page app set up with Inertia, we'd ideally be posting data kind of like an API request—but Inertia makes this way easier for us, so we don’t have to handle all that manually.

We set up the form fields (a textarea in this case, for posting a body of text), add styling, and a submit button. At this point, if we tried to submit, the form is still acting like a normal form (submitting via the query string) which is not what we want in a SPA.

Then, we introduce the useForm helper from Inertia. This handy tool lets us track form data and is designed specifically for these kinds of apps. We create a reactive form object with useForm, show how to track form fields (like our body field), and talk about all the useful properties it gives us—like isDirty, errors, and processing. We also mention how this would work if you had multiple forms on one page.

Finally, we show how, as you type, your data is being tracked by the form object. Next episode, we'll dig into how to actually submit this data to Laravel and how it all works under the hood!

If you've used Vue before, most of this will feel familiar—but with the added magic of Inertia to streamline the form process.

Episode discussion

No comments, yet. Be the first!