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.