Dynamic forms in Hotwire

In this video, I'll show you a neat trick to swap out form fields dynamically using Turbo Frames and a tiny bit of stimulus JS (only ~5 lines). This is something I've used on a few production projects and comes in handy on your Hotwire Rails apps.
You can follow along with the source code before this tutorial:
github.com/phawk/coinfusion/t...
And the finished code is here:
github.com/phawk/coinfusion/t...
Chapters
00:00 Intro
00:17 Example Scenario
01:23 Setting Up Fields
02:30 Turboframe Wrapper
03:50 Adding Navigation Controller
05:12 Controller Params
06:34 Testing Toggle Function
07:37 Conclusion
If you like this content, please consider subscribing to the channel.
---
Has this video helped you out? Consider buying me a coffee to say thanks and support future content like this, thanks!
app.payhere.co/rapid-ruby/buy...
You can also find more content like this, including premium courses and exclusive community and mentorship to help you level-up! Head over to rapidruby.com and use the code RRKZbin for a discount!

[@repoles]

Oh my god! I didn't know that if you change dynamically the `src` of a turbo-frame it will make its magic to reload the content! Amazing technic!!! 👏

[@SupeRails]

Very interesting idea with a stimulus controller and redirecting onsubmit within a turbo_frame with some params.... also, nice to see enums to strings ( individual: "individual" )

[@fjdeveloper]

Amazing. Thanks for sharing

[@clementcoquille4153]

Nice one ! Couldnt we improve it futher more by sending a turbo_stream :replace instead of re-sending the whole page ? Clicking radio buttons reload the whole page, when it could only send the desired tags

[@ledockol]

Great! Thanks!

[@EnjoytheMents]

Nice explanation. Thanks. What theme u use for vscode?

[@rapid-ruby]

Thanks! It’s the Electron Color Theme, you can find the package link here: marketplace.visualstudio.com/items?itemName=kuscamara.electron

[@tolaseadegbite1027]

Hello, how do I implement the controller params part? I generated devise controllers but the content is different from yours.

[@Ben-ni9bc]

Thanks for yours videos. How can I do the same things with a select insteed a checkbox ?

[@rapid-ruby]

Thanks Ben! The same technique should work regardless of the form element being used!

[@pging8328]

is it a crazy idea to use morphdom to submit the entire form to a controller action (with a new url / form action) - that way you can have truly dynamic forms, i.e. have validation happening when a field is blurred, or using dynamic forms as you have done - only the aspect that have changed need to be updated, morph dom takes care of that.

[@monetiza]

Dope

[@pging8328]

Wait a minute: don't you need to submit the form everytime someone clicks on "company" or "individual"?

[@ddd2283]

Why no souce code (((

[@rapid-ruby]

Hi Dima, apologieis I forgot to put the links to the source code into the description. It should be in now, and you can see the final version here: github.com/phawk/coinfusion/tree/turbo_frames_2 Thanks!

[@ddd2283]

@@rapid-ruby tons thanks!

[@ddd2283]

@@rapid-ruby i think this repo is private ((( i got 404

[@rapid-ruby]

My bad! I have just made it public now, thanks for letting me know!

[@ddd2283]

@@rapid-ruby my mind was broken )))) i spend a lot of time before understanding become to me ))) ./bin/rails turbo:install && ./bin/rails stimulus:install needs after git clone :))) Now all works fine! Thank you a lot!