Inertia Form Basics

In This Lesson

We'll introduce the basics of working with form in Inertia. We'll set up our register form with its fields, get our form state set up, and send off a post request to one of our AdonisJS routes.

Created by: @tomgobich
Published: 1 year ago

Chapters

00:00 - Adding Our Form and Fields
02:59 - Sending & Handling Form Submissions

Join the Discussion 0 comments

Be the first to comment!

Transcript

Okay, so we have our login and register pages created, but we don't have a form on it to actually be able to send out data to login or register.
So let's do that next. For right now, let's just focus on our register page, and then we'll circle back and cover in our login page up till we have all the basics settled. So on our register page,
underneath this little header section that we have here, let's go ahead and add in a form element with a class of grid and a gap of three on it. First, what we're gonna wanna do
is install a couple of shotcn components. So we'll hold Command + Shift + P, type in shotcn/view, and you'll see that we have that add new component that we use to install our button.
We also have add multiple components. So let's go ahead and add in multiple components because we're going to want an input field. So we can go ahead and toggle that one on,
as well as a label field installed. So with those two selected, let's go ahead and hit OK to install both of those. And there we go, it's now done.
So we can hide our terminal away there, close it out. And if we look inside of our components UI directory, we should now have an input and label folder,
housing each of those components that we installed. And since they're inside of our components directory, they will automatically resolve as we use them inside of our template. Meaning inside of our form, we can go ahead and add in a label.
And inside of this label, we'll do a span with the text full name for our full name field. And then we'll go ahead and put the input directly inside of this label.
Whenever you have the input as a child of a label, they will automatically bind to one another so that you don't have to worry about adding an ID to your input and the for attribute on your label. That'll just happen automatically.
We'll have a type of text, or you can omit that altogether, that'll be the default. And then we're also going to need data for this input to house using view model.
So let's go ahead and jump up to our script now and let's add in our form. So we'll do const form equals, and we'll use a ref. We'll import that here momentarily with an object inside of it.
Let's go ahead and import that ref from view. And inside of our form, we're gonna want a full name field. We'll just default all of these to an empty string,
an email, as well as a password. One key for each of the three fields that we're gonna need. Let's scroll back down to our input now and make use of our form.fullname
specifically for our full name input. And that input out. And so that we have a slight gap in between our span and our input, let's go ahead and add a class to our label of grid with a gap of one.
Cool. We can copy this label as well as input inside and paste it in twice. Once here for our email, so we'll switch the label accordingly. The type here is gonna be email
and we need to switch the view model from using form.fullname to using form.email. Then lastly, we also need to do the exact same for our password. So we'll add our password in there,
type of password, and then switch the view model from using full name again to password. All right, then let's use our button component that we have installed already. Specify it's type to submit
and add the text register to it. Cool. So we have our form and all of our inputs done. Jump back into our browser to make sure everything looks okay. And sure enough, we have our register heading section
that we've added previously, as well as our three new form fields and our register button. So everything looks correct there. We can hide that back away and let's add in our submission handler. In previous lessons,
we learned about Inertia's router and that we can actually post data with that router. So we're gonna make use of that here. Let's go and scroll up to the top of our file,
import router from @inertiajsview3. And if you want, you can put this inside of a method or you can make use of it directly on the form @submit handler.
So we'll do @submit there to add the event handler and we'll also prevent it, prevent forms native browser behavior there. It'll make use of our router and we'll post with this router
to the URL/register and include the data of our form. With that in place now, we should be able to jump back into our browser. Let's give that a refresh so that it syncs back up.
We'll put up our inspect panel, specifically the console. I'm gonna expand this out a little bit just to give us a little bit more working room and let's type in some fields. So we have Tom Gobich,
Tom@editfence.com and then some password there. We can hit register and we see our post requests go out. Now, currently our /register post route
is just redirecting us right back to this page. So it looks like nothing happened visually on the page except for this gigantic safe password pop-up, but we did actually send out a post request.
And if we take a look at that request and its data, we actually sent up those email, full name and password fields. Cool, so on our client side, everything's working okay. Right now, we just need to actually be able to handle that
and do something with it on our server side, which is what we're gonna do next.

Building with AdonisJS & Inertia

91 Lessons

14h 5m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.