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:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#django #htmx #hyperscript #python

[banka]

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! ❤

[seydinaoumarsamabaly]

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 !

[johnsonberko]

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

[tobidegnon]

Great video, I'm really loving these htmx tutorials

[reunac]

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

[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.

[ernestoperezamigo]

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

[sessionone]

Your videos are great! You explain everything very well :)

A question, if you don't mind.. How would you reset a select to the <option selected> 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 :)

[franciscodelafruitas]

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?

[rmireckiyt]

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

[BathingAfrican]

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