Handling Multiple Dynamic Forms (HTMX vs inline formsets + JavaScript vs multiple forms on one site)

Using Django Forms & APIs
1

Hello @all,

I like to code a form where user optional can upload an undefined number of files. The User exists already in the database and has to complete data in that form + upload optional files. There are two Models (User(1):Files(n)).

What I like to discuss is, what is best practice in this case, because there are different options available (inline formsets + JavaScript, HTMX, multiple forms with one submit, etc)

What I have done so far is to work with inline formsets and JavaScript. The user selects a file and when he want’s to add another file, another formsnippet is added via JavaScript. What I don’t like about this approach, is the handling of renaming all formsnippets when a form is dynamically removed (not the last form).

What is your approach to handle this challange? Does anyone has solved this with htmx?

2

Welcome @Suhel-El-Salim !

This is a case where someone has entered a form and decides to remove it before submitting it? Or is this a case where they’re bringing up a form that already has entries from a previous submission?

In general, in either case, you do not need to physically delete the form from the formset. If you set the can_delete attribute on the formset, you can logically delete the forms without needing to rename subsequent forms.

See the docs at Formsets | Django documentation | Django for further details.

3

Hello Ken,

thank you for your support, I have read already a lot of your answers to questions in this forum :slight_smile:

This is a general question how to handle this aproach. Not only technical, but also from user perspective.

If a user want’s to add another file for upload and presses the ‘Add’ Button, instantly a new formfield appears. The user now would expect that if he presses a delete button, that the uploadfield (formfield) and the content instantly dissapears. A checkbox to mark a formfield for deletion would be inconsistently. Also I can’t trust that the user always deletes only the last field.

My question is, what is technical and from a user perspective a good approach to solve this problem and how are solving other users this challange. HTMX seems to be a solution that can fit.

4

With a delete, you do not need to show it as a checkbox. You can render a trashcan icon that sets the delete flag and hides the div. But the form itself remains as part of the formset. It’s a lot easier that way. (That’s how we handle it.)

1 Like
5

That’s a smart solution, and so easy… :grinning:

Do you have further experience with Django multiple/dynamic forms and HTMX? With regard to the potential of HTMX as JavaScript alternative, what is your opinon, if I may ask?

6

Using formsets with HTMX? Not much. (I do have a project where the “add another form” function is an AJAX request handled by HTMX, but that’s about it.)

But I do a lot of work with dynamic forms (forms created or modified by views), and I’m absolutely a huge fan of HTMX.

I won’t say that HTMX replaces or eliminates JavaScript for me, but it has greatly reduced the amount of JavaScript I need to write. (I think some of what I do could be handled by either HTMX or Alpine, but I’m ok with the mix I have.)

2 Likes