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

any kind of direction. I didn't know if this needed to be a javascript or Jquery thing of if django could handle it. Basically i have a few different forms, 1:1 relationships and i would like to have a button, click said button and add a form to the screen. — Ben
– Ben, Commented Aug 2, 2019 at 18:49

lieahau · Accepted Answer · 2019-08-02 20:04:22Z

1

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 :)

edited Aug 2, 2019 at 20:04

answered Aug 2, 2019 at 15:06

lieahau

5185 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ben Over a year ago

I have looked a bit at formsets, but I don't know if they are exactly what I need. Form sets appear to work extremely well when you have a 1:many relationship and have a fixed set, like author to book. My problem is these are a 1:1 but the forms are all different and change depending on the nature of the project. For example, you may have 1 overall permit that contains a utility and ROW permit. and the next overall permit that is a utility sewer and water. so i need to add different forms to a single view not multiple instances of a single form. thanks

lieahau Over a year ago

is it means you want to clone the <form> tag instead each time user click the button?

Ben Over a year ago

I'm not sure, I just need a method or procedure to add different additional forms to this base form as needed.

lieahau Over a year ago

I have edited my answer, hope it can solve your problem :)

rishabh singh · Accepted Answer · 2019-08-03 17:49:14Z

1

First add the button
```
<button><button>
```
Then add onclick attribute to it which will help react on click
```
<button onclick='do'><button>
```

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>

edited Aug 3, 2019 at 17:49

answered Aug 3, 2019 at 5:44

rishabh singh

1659 bronze badges

3 Comments

rishabh singh Over a year ago

see the post again

FZs Over a year ago

Thank you! Now this answer can help more people, and also result in more upvotes.

rishabh singh Over a year ago

oo i thought u asked(as que without ans don't get highlight that'y )

Collectives™ on Stack Overflow

add multiple forms to page on button click

2 Answers 2

EDITED

4 Comments

all together

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDITED

4 Comments

all together

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related