add multiple forms to page on button click

Question

I am working on developing a permitting app using django. This is my first django project so bear with me here...

we have a default utility permit that contains some basic info like property owner and address. Then from that you can attach a sewer, or water or row or any combination of related tables to the permit. Basically I am looking for a way to return a page with the default utility permit then have a series of links or buttons to add more forms to that page.

I made some model forms for each of the models and can display them individually on the page

forms.py

class UtilityPermitForm(forms.ModelForm):
    class Meta:
        model = UtilityPermit
        fields = ['...']


class SewerPermitForm(forms.ModelForm):
    class Meta:
        model = SewerPermit
        fields = ['...']


class WaterPermitForm(forms.ModelForm):
    class Meta:
        model = WaterPermit
        fields = ['...']

I successfully added them to a list and could iterate through and get them to add

views.py

class BuildForms(View):
    permits = []
    utility_form = UtilityPermitForm
    sewer_form = SewerPermitForm
    water_form = WaterPermitForm

    permits.append(utility_form)
    permits.append(sewer_form)
    permits.append(water_form)


    template_name = 'engineering/UtilityPermitForm2.html'

    def get(self, request, *args, **kwargs):
        out_permits = []

        for form in self.permits:
            out_permits.append(form())
        return render(request, self.template_name, {'form': out_permits})

    def post(self, request, *args, **kwargs):
        if request.GET.get('testButton'):
            return HttpResponse("I guess")

        form = self.utility_form(request.POST)

        return render(request, self.template_name, {'form': form})

    def add_permit(self, request, permit):
        # need to get a thing to add a permit to the list
        pass

.html

{% block content %}
<div>
    <form class="site_form" action={% url 'engineering:utility_permit' %} method="post">
        {% csrf_token %}
        {% for item in form %}
        {{ item }}
        <hr>
        {% endfor %}
        <input type="submit" value="Submit">
    </form>
</div>
    <a href="  "></a>
{% endblock content %}

so again, my problem is I want to start with a one permit and then have links or buttons to add each form as needed. I'm a bit at a loss here and any help would be greatly appreciated.

EDIT: so I have this base permit that comes up when a user navigates to it like so, and I want to have a user click the add sewer permit button or link or whatever

and then the corresponding permit will come up

Answer 1

1. First add the button

   <button><button>
   

2. Then add onclick attribute to it which will help react on click

   <button onclick='do'><button>
   

3. Then create script that contain the function to display the other form

   <script>
   function do() {
           document.getElementById('form').innerHTML ='add your form here'
   }
   </script>
   

all together

    <button onclick='do'><button>
    <script>
    function do() {
            document.getElementById('form').innerHTML ='add your form here'
    }
    </script>

Answer 2

you can create multiple same form in one page dynamically using formset see Documentation

and maybe this tutorial is exactly what you are looking for.

EDITED

if I understand your question correctly, how about this:

first, it would be better to separate your form with dictionaries instead of list in your views.py

context = {
  'utility_form': self.utility_form,
  'sewer_form': self.sewer_form,
  'water_form': self.water_form
}
return render(request, self.template_name, context)

then in your .html file,
if you want to add one form each time you click the button, my trick is:
show your base permit form first (said utility_form), button to add other form, and hide your other form first.

<div class="form-container">
   <form class="site_form" action={% url 'engineering:utility_permit' %} method="post">
      {% csrf_token %}
      {{ utility_form }}
      <div id="additional-forms"></div> <!-- notice this div -->
      <hr>
      <input type="submit" value="Submit">
   </form>
</div>

<button class="add-sewer-form">Sewer Permit</button>

<div id="sewer-form-template" style="display: none;">
    <div class="sewer-form-container">
        {{ sewer_form }}
    </div>
</div>

and then using jquery to add onclick listener, clone that hidden form, then insert it after base form (actually inside div with id additional-forms).

$('.add-sewer-form').click(function(){
   let sewer_form = $('#sewer-form-template .sewer-form-container:first').clone(true);
   $(sewer_form).appendTo($('#additional-forms'))
});

I haven't test it yet, but when you click the add button, it should be give result like this:

<div class="form-container">
   <form class="site_form" action={% url 'engineering:utility_permit' %} method="post">
      {% csrf_token %}
      {{ utility_form }}
      <div id="additional-forms">
         <div class="sewer-form-container">
            {{ sewer_form }}
         </div>
      </div>
      <hr>
      <input type="submit" value="Submit">
   </form>
</div>

<button class="add-sewer-form">Sewer Permit</button>

<div id="sewer-form-template" style="display: none;">
    <div class="sewer-form-container">
        {{ sewer_form }}
    </div>
</div>

Hope it can answer your question :)