Hotwiring Laravel: Dynamic Dependent Fields
In this video, we'll learn to build dynamic fields dependent on each other, where the value of one field affects the options available in another area.
We'll build this entirely using only full-page transitions and form submissions. Then, we'll introduce sprinkles of JavaScript to enhance the experience.
Links:
Sean's blog post: https://thoughtbot.com/blog/dynamic-f...
Chapters:
00:00 - Intro
00:10 - Sean's Blogpost
00:44 - Getting to Know the Laravel App
01:40 - Listing all Countries and Their States
03:40 - Reloading States With Form Submissions
05:50 - Improving the UX with Sprinkles of JavaScript (Stimulus.js)
08:40 - Scoping the States Reloading Using Turbo Frames
09:50 - Discussing Limitations of The Form Submissions Approach
11:00 - We Have a Bug!
12:00 - Sending Only The Necessary Form Data With Anchors
13:04 - Stimulus Connection and Action Order
16:00 - Discussing The Final Solution
17:00 - Hotwire, Jetstream, and UX