Making a Form with Many-To-Many Relationships and Multiple Forms Inside

Using Django
1

I want to create a Form where the User can select predefined risks and asses them or create own risks and asses them.

The first part is already in production but the second part troubles me. I am not sure how to do this.
The custom risks should be a Model and connected to the main sheet via a ManyToMany-Relationship.

Here is the part where I am at a loss:

In the Template there should be a button called “add risk” and then another form should show up where you can name the risk and asses it. If you click on “add risk” again, another form should pop up.

When everything is valid the risks should be created an added to the main sheet.

How would I do this? I choose Vue.js for tasks like this but I am not so good in JS that I could just make it up on the spot.

2

We mostly use Formsets for doing stuff like this, along with a little bit of JavaScript (jQuery) to add the additional instance of a form when needed. (However, this is the case where we’re creating additional forms “in line” rather than using a pop up.

For using a pop up, we use jQuery. The “Add Item” button displays a modal dialog, and the submit button (after validation) returns the updated item list for the main display.

Ken

3

Hi Ken,

Formsets looks like the part that I am missing.
How would the “in line” rendering and adding additional instances work? Looks like the documentation has nothing on that topic.

Update:

I found a very good explanation how to add forms dynamically via formsets:

1 Like
4

Adding a new instance to the already-displayed page requires a little bit of JavaScript. There are a couple different ways of handling this.

What we do when the server is preparing the page for display, we use the formset.empty_form property to get an empty copy of the form to be stored in a hidden div. The Add Item button makes a copy of that empty form, replaces the __prefix__ with the value of forms-TOTAL_FORMS, increments forms-TOTAL_FORMS, and appends the copied form into the div where the forms are displayed.

I know there are a number of blog posts available if you search for “django add form to formset” - I don’t have any good references handy.

Ken

1 Like