Hyperscript and HTMX - Form Examples with Django

In this video, we'll look at some form-related examples that use Hyperscript and HTMX.
Notably, we'll see how to:
1. Submit a form with HTMX
2. Disable submit button using hyperscript while the HTMX request is in-flight
3. Clear the text from the input field after submission, using hyperscript
4. Use the Fetch API with hyperscript and process JSON data
☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:
ko-fi.com/bugb...
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: www.bugbytes.i...
👾 Github: github.com/bug...
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
Hyperscript: hyperscript.org/
Hyperscript docs: hyperscript.or...
HTMX Events: htmx.org/events/
Hyperscript Fetch command: hyperscript.or...
#django #htmx #hyperscript #python

[@banka990]

I spent a whole day trying to figure out how to conditionally change the hx-target and hx-swap based on whether the form was valid or invalid, and here comes the savior. Just amazing content! ❤

[@bugbytes3923]

Thanks a lot man! Glad to have helped!

[@seydinaoumarsamabaly1806]

You make us so happy with your videos the same way the Santa Claus makes children happy with gifts. Thank you for all. GOD bless you mate !

[@bugbytes3923]

Thank you so much mate, I appreciate the support!

[@johnsonberko1409]

I love your videos. I want more videos on htmx and hyperscript. You are awesome.

[@bugbytes3923]

Thanks a lot, appreciated!

[@tobidegnon4409]

Great video, I'm really loving these htmx tutorials

[@bugbytes3923]

Thanks Tobi!

[@reuna4c3]

Cool video. Fast pace, but really educative. htmx and hyperscript together helps forgeting JS :)

[@bugbytes3923]

Indeed! Thanks very much!

[@FirdausAziz]

HTMX + HyperScript + Django = Happiness

[@Mooooooooooooooooot]

Fantastic video. Thank you!

[@bugbytes3923]

Thank you very much!

[@jonathacarneiro]

excellent video, congratulations!

[@bugbytes3923]

Thanks very much, glad you liked this!

[@ernestoperezamigo4866]

Great video !!! I have been following your channel for a few months and every video you make is super interesting and very useful for the community. Congratulations!!!! Question, based on your experience, which approach would you most like to use if you had to start a medium-sized project: 1- Django + Django-Unicorn, 2- Django + HTML + AlpineJS, 3- Django + HTMLX + Hyperscript, 4- Another approach, which one? Big hug

[@bugbytes3923]

Thank you Ernesto! I appreciate the support :) For a medium size project, I'd go with Django, HTMX and Hyperscript these days. There's a lot of flexibility with what you can do with these tools. But they are all solid choices, and I'll be creating many more videos on different choices for different applications and use-cases.

[@sessionone1]

Your videos are great! You explain everything very well :) A question, if you don't mind.. How would you reset a select to the after submit? You explain how to clear an input field, but if I have select next to input, how would I go back to the initial value? Thank you :)

[@onnot701]

superb explenation

[@bugbytes3923]

Thanks very much!

[@gerhardspitzlsperger1567]

Great content

[@bugbytes3923]

Thanks!

[@franciscodelafruitas9424]

This was pure goodness! Could this be used for an ecommerce app, for example user has added more items than are available in stock, perhaps add it in with django-unicorn, or would it be too hacky?

[@bugbytes3923]

Thanks a lot! You could certainly use these tools to look up stock numbers on the backend, and conditionally display forms and messages! I think it'd be an interesting project to do a full ecommerce example with these tools, and I'm considering building a complete course in this.

[@realdanielpeach]

I love the abilities that htmx, alpine, hyperscript give us, but I can't help but think "yay spaghetti code is back!" while watching these disparate parts be pulled and stuck wherever is convenient.

[@BathingAfrican]

are all these django tuts possible in fastapi? django looks too beefy and bloated for me

[@bugbytes3923]

With modifications, yes. For example, you won't have the Form class abstraction in FastAPI. If you configure FastAPI to work with HTML templates (as opposed to just returning JSON) then it can all work seamlessly.

[@rmireckiyt]

What font & vscode theme are you using ? Thanks for the videos!

[@universaltoons]

Dark+ (the default one, not Dark Modern) with Consolas I think

[@ateftech8969]

please code source