Django & HTMX - Dynamic Form Creation and Submission

In this video, we look at how to dynamically create forms using Django and HTMX, and look at how to dynamically submit these forms - both individually, and as a group.

We'll see some cool tricks here, such as:
- Using the hx-on attribute to perform actions after submission
- Using the "from" trigger modifier to trigger submission of all forms via a single button click

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

▶️ Full Playlist:

📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
00:00 Intro
00:43 Defining model and ModelForm
02:53 Adding Form to View and Template
07:21 Adding forms dynamically with HTMX
12:04 Submitting forms individually with HTMX
13:55 Adding contact list to template
17:36 Removing form after submission with hx-on attribute
19:13 Submitting multiple forms at once with HTMX
22:02 Adding Cancel button to clear forms

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

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

#django #python #htmx

[xujzlie]

Whenever I see new BugBytes videos, I click "like" first, before grabbing a drink to go along with watching the video. 😁

[AmoahDevLabs]

I can't believe you're still doing these tutorials. Your work is beyound expectations. To be frank with you, "You're very much sefless". You always enlighten people. This is what I call the TRUE GOSPEL. I really appreciate all your works.

[lucidcatnap]

Subscribed for the amazing combination of relevant web development content and a Scottish accent

[trosgate]

I have no doubt that this teacher will reach 10, 000 users in no time. Simple reason is that he knows how to implement and utilize the capabilities of external packages

[aleksmith]

Came from another one of your videos, you can't imagine my relief when I saw you also do htmx tutorials. Keep up the great work, love the Django and HTMX content

[bitpilot]

You have the best videos on HTMX. Thanks for sharing.

[graczew]

Your content is a pure gold mate. Thanx for your time and effort to make this.

[seydinaoumarsamabaly]

Master🙌🏾, just a delight your tutorials from the day one till today. Thank for everything you're doing for others.

[s.victor]

This is awesome; keep on the good work. The video explains what I need to complete my project.

[ocloudng]

Hello BugBytes, You have been amazing since I found your channel. Can you make a video on how to use htmx to update dynamic forms /formset like this one

[fernandtape]

Welcome back HTMX. Great as always. Can't wait for the coming full project.

[MalfuncEddie]

Maybe an idea for the next video (django, htmx):
How do you create a "wizard" where the questions influence each other.
like

formA yes/no question (Would you like to know more)
if yes ->
ask for mail(q1a)
ask for name (q1b)
--> go to formB
if no ->
go to form C
formB yes/no question (Would you like to know our promo's)
if yes: Ask more questions
if no: go to end
....

at the end I it should return a dict with

{ q1: true,
q1a: "answer",
q1b: "answer",
q2: false,
q2a: "",
q2b: "",
q3: ...
}
I know there are "questionaire" django projects but for some reason I can't get my head around them.

[craigphollingsworth]

Great video again! Really, really helpful. Would love to see a follow up on how you would handle validation on the multiple submit.

cheers

[dovh]

When working with vanilla forms like this `hx-boost=true` is a great attribute. As for having the button outside of the form you could simply use the `form` attribute, like this `<button

[mqbdinu]

Spectacular mate thx! How would you dynamically add more fields/rows to one form? For example, you want to add and number for some, but then want to add additional information, rows, for other contacts and the additional info isn't necessarily 'name' and 'number'.

[JayJay-thhd]

Nice work! Every video is very helpful to understand django and htmx!
In this example it's possible to limit the number of forms where the user can create?
hx-get="{% url 'create-contact' %}"
hx-target="#contact-forms"

[ayubkara]

thank you as always for the great content, can't help but ask will you ever consider doing something about Django Channels maybe in the future ?

[zawanns]

Thank you so much for your content, always helpful. I’ve just used this method and it works perfectly. And i’d like to know what if in the partial form we want to use django-select2 on one of the field. Thank you once more.
😎

[myou]

it would be really cool if you can add an auto-complete to form line :D BTW really cool content

[iniasderoeck]

Could you a video on the htmx with django CBV and more advanced relations instead of 1 FK. I have a project im really struggling with... Kind regards