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:
ko-fi.com/bugbytes
▶️ Full Playlist:
• Django & HTMX
📌 𝗖𝗵𝗮𝗽𝘁𝗲𝗿𝘀:
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
𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:
📖 Blog: bugbytes.io/posts/
👾 Github: github.com/bugbytes-io/
🐦 Twitter: / bugbytesio
📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:
django-htmx-todo-list (Jack Linke): github.com/jacklinke/django-h...
hx-swap: htmx.org/attributes/hx-swap/
hx-on: htmx.org/attributes/hx-on/
django-htmx CSRF tip: django-htmx.readthedocs.io/en...
#django #python #htmx

Пікірлер: 96

  • @user-xu7jz4li7e
    @user-xu7jz4li7e Жыл бұрын

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

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks! Glad you like the videos 👍

  • @AmoahDevLabs
    @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.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot! Means a lot, thank you.

  • @lucidcatnap
    @lucidcatnap10 ай бұрын

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

  • @bugbytes3923

    @bugbytes3923

    10 ай бұрын

    Thank you, and greetings from Glasgow! 😄

  • @aleksmith2808
    @aleksmith2808 Жыл бұрын

    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

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot Alek! Glad you're liking the content - will keep going 💪

  • @trosgate
    @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

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot for the nice comment, really appreciate it!

  • @seydinaoumarsamabaly1806
    @seydinaoumarsamabaly1806 Жыл бұрын

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

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks Seydina! Much appreciated!

  • @bitpilot79
    @bitpilot797 ай бұрын

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

  • @bugbytes3923

    @bugbytes3923

    7 ай бұрын

    Thanks a lot, appreciate it!

  • @o3cloudng357
    @o3cloudng357Ай бұрын

    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

  • @graczew
    @graczew Жыл бұрын

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

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot mate. Glad it's being well received!

  • @graczew

    @graczew

    Жыл бұрын

    @@bugbytes3923 I'm follow your channel for longer time and content is really useful. I just hope you will not stop make django content.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    @@graczew Thanks a lot for the support over the time, Krzysztof. Django will always be a core part of the content, even with some other stuff mixed in.

  • @fernandtape9363
    @fernandtape9363 Жыл бұрын

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

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks!

  • @craigphollingsworth1460
    @craigphollingsworth1460 Жыл бұрын

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

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot Craig! Will look into an extension of the video 👍

  • @Peterstavrou
    @Peterstavrou Жыл бұрын

    Another excellent video!

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thank you Peter!

  • @MalfuncEddie
    @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.

  • @ermalgashimramori
    @ermalgashimramori Жыл бұрын

    As always great great content.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot!

  • @user-mq6bd2in1u
    @user-mq6bd2in1u Жыл бұрын

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

  • @95myou
    @95myou Жыл бұрын

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

  • @JayJay-th3hd
    @JayJay-th3hd10 ай бұрын

    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"

  • @bal_mahmuda
    @bal_mahmuda11 ай бұрын

    mantap, makasih bug bytes. bagus banget nama channel nya.

  • @dovh49
    @dovh49 Жыл бұрын

    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 `Submit`.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Good tips, thanks!

  • @ayubkara1092
    @ayubkara1092 Жыл бұрын

    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 ?

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks a lot! I did this video on Websockets + HTMX that uses Django-Channels. kzread.info/dash/bejne/eJeK2aZ-k9ice5M.html There will be a full course on Channels this year at some point. I'll start planning this when I get some time in a few months.

  • @hakanbilgin6875
    @hakanbilgin687526 күн бұрын

    thank you good informations.

  • @bugbytes3923

    @bugbytes3923

    24 күн бұрын

    Thanks!

  • @zawanns
    @zawanns10 ай бұрын

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

  • @bugbytes3923

    @bugbytes3923

    10 ай бұрын

    Thanks a lot! I'm not sure about django-select2 in this example, but could look into that in a future video perhaps.

  • @kellyqiu7784
    @kellyqiu7784 Жыл бұрын

    Thank you! could you please also upload the starter code for this?

  • @UmutAlverGuclu-xg8ex
    @UmutAlverGuclu-xg8ex Жыл бұрын

    Thank you! How would you add inline editing - htmx?

  • @iniasderoeck1345
    @iniasderoeck1345Ай бұрын

    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

  • @umrana5946
    @umrana59463 ай бұрын

    thanks alot

  • @bugbytes3923

    @bugbytes3923

    3 ай бұрын

    Thanks for watching!

  • @UsGreg
    @UsGreg Жыл бұрын

    Please, make hx-boost tutorial :)

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Good idea! Thanks.

  • @grzegorzkalmus3629

    @grzegorzkalmus3629

    Жыл бұрын

    Nice idea :)

  • @marcoroose9973
    @marcoroose99732 ай бұрын

    Very nice! But what about form errors?

  • @eduardsanchez6962
    @eduardsanchez6962 Жыл бұрын

    greate tutorial OMG, just a question can this works with forenkyes, like add multiples instance of phone number of one person??

  • @Igor160594
    @Igor1605944 ай бұрын

    you are the best

  • @bugbytes3923

    @bugbytes3923

    4 ай бұрын

    Thanks a lot, appreciate the comment!

  • @dodokwak
    @dodokwak Жыл бұрын

    Thx.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    You’re welcome!

  • @smartjoetechnologies
    @smartjoetechnologies Жыл бұрын

    Thanks sir

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    You're welcome! Thanks for watching.

  • @tofuman9526
    @tofuman95264 ай бұрын

    I wonder. Would you build an app like Typeform with HTMX? Conceptually it seems like SPA approach is more suitable, just because it seems easier to build out. Even the display of the forms themselves, which in Typeform may include some logic, I.e rendering different forms acocording to answer provided…

  • @DenisCardosoTutor
    @DenisCardosoTutor7 ай бұрын

    Great tutorial. Is there a way to does not show the "submit all" if there is no form to submit ?

  • @lordAvatar
    @lordAvatar Жыл бұрын

    Hej BugBytes, great vid as always. I can't seem to find your repo for this one, am I being dumb/crazy?

  • @asqarsakenov
    @asqarsakenov6 ай бұрын

    How to make drop-downs which can fetch only the distinct values from psql? And next drop down in one row should depend on values of the previous choice and etc. I have to filter up the product price based on 4 filters like in excel and then fetch the corresponding price from DB to form an invoice. Thanks in advance!

  • @AliHassan-wc6nb
    @AliHassan-wc6nb Жыл бұрын

    Best thing you did ma'am, can we validate all Input value at once while sending all forms at once. . Like all debits must be equal to total credits. Hope you got my point.

  • @trosgate

    @trosgate

    Жыл бұрын

    In the widget, I think we can specify required=True to ensure that any form added is required. Htmx can be used to validate as well

  • @rokibulhaque1673
    @rokibulhaque16738 ай бұрын

    Hi, Can you please share a tutorial for nested form using Django & HTMX...!!!

  • @aafan.kuware
    @aafan.kuware2 ай бұрын

    🎉🎉🎉

  • @bugbytes3923

    @bugbytes3923

    2 ай бұрын

    Thanks!!

  • @aafan.kuware

    @aafan.kuware

    2 ай бұрын

    @@bugbytes3923 thank you 🙏🙏🙏

  • @johnsonwambiru8497
    @johnsonwambiru8497 Жыл бұрын

    life saver thanks

  • @peterevance

    @peterevance

    Жыл бұрын

    Hello Johnson, What are you developing? 😅.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks!

  • @johnsonwambiru8497

    @johnsonwambiru8497

    Жыл бұрын

    @@peterevance a system for managing invoices and delivery notes so i need a way to add multiple items and save them at a go

  • @peterevance

    @peterevance

    Жыл бұрын

    @@johnsonwambiru8497 Ah , I see. @BugBytes had a video on something like that too. Something like Form Wizard tutorial.

  • @joey4uandme
    @joey4uandme2 ай бұрын

    Can this be used for a single field in a model? For example. You use htmx to display a field in a model on a form only when another model field choice is selected.

  • @VTym-tk8qr
    @VTym-tk8qr Жыл бұрын

    Hello. Thanks for the video lesson. As always, everything is at the highest level. Could you show how to complete the following task: a block with comments under the post, with sub-levels (replies to comments) and a separate block that adds up the number of comments. Thank you.

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Thanks! That's an interesting suggestion. Will add to the list, but it would require a new video and some prep.

  • @xVeraldi
    @xVeraldi Жыл бұрын

    Would you be able to replace the Cancel button with an icon and have the same result using hx-on attribute?

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Absolutely! Any icon with an hx-click trigger attached to it will work.

  • @TomStoutPhotography
    @TomStoutPhotography5 ай бұрын

    I love your videos, but I can't get this one to work. When I click add, it duplicates the entire page with the h1 title and the green add button...

  • @amine63404
    @amine634044 ай бұрын

    I am struggling with something, can you help please. How do we deal with forms errors. I am able to show them, but not able to remove them, because of when the form is valid, it's adding a new line but of course not removing the htmp errors tags.

  • @dimasarestu2043
    @dimasarestu204311 ай бұрын

    HTMX with django is really good, but how to validation all form, which if one form fail all form fail submit too

  • @frameff9073
    @frameff9073 Жыл бұрын

    thank

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    You're welcome, thanks!

  • @ewyg
    @ewyg Жыл бұрын

    which one should I use? hyperscript or alpinejs...? seems like alpinejs is more popular and mature?

  • @bugbytes3923

    @bugbytes3923

    Жыл бұрын

    Both are great choices. Alpine is probably more popular and mature, though.

  • @albyunni8211
    @albyunni821110 ай бұрын

    This code is the one i am looking . can i get the code

  • @dglebable
    @dglebableАй бұрын

    Can you provide the source code you have created?

  • @carloseduardovieiramartins6102
    @carloseduardovieiramartins6102 Жыл бұрын

    Its possible tô make for example, a tree level form, with a product , color and sizes variants to submit ALL together and get the fk for each one?

  • @kingbabu7373
    @kingbabu73736 ай бұрын

    How to get single submit button for all multiple forms to submit to the database

  • @bugbytes3923

    @bugbytes3923

    6 ай бұрын

    There's a "Submit All" button in the latter part of this video I think, to show how to submit all the forms on the page.

  • @kingbabu7373

    @kingbabu7373

    6 ай бұрын

    Submit all button is not working for my multiple orders to submit on click

  • @catalinim4227
    @catalinim422710 ай бұрын

    why not use one form with multiple rows 🧐

  • @shivavsk6178
    @shivavsk617810 ай бұрын

    Can you share the source code for this

  • @dglebable

    @dglebable

    Ай бұрын

    Was there a reply to this request for code?

  • @alexforget
    @alexforget5 ай бұрын

    that repo is all broken, the code hasn't been updated for 3 year and is no longer working with django

  • @dstrelnikov
    @dstrelnikov2 ай бұрын

    man you do great tutorials, but can't understand how "div" element became to be "dev" in pronunciation, same for "file" -> "fail"

  • @bugbytes3923

    @bugbytes3923

    2 ай бұрын

    Thanks! Sorry, the Scottish accent is quite particular about these things.

  • @umairsarwar7472
    @umairsarwar747210 ай бұрын