已编辑

Question

我正在使用django开发许可应用程序。这是我的第一个django项目，所以请在这里忍受...

我们有一个默认的实用程序许可，其中包含一些基本信息，例如财产所有者和地址。然后，您可以将下水道，水，行或相关表的任何组合附加到许可证上。基本上，我正在寻找一种方法来返回具有默认实用程序许可的页面，然后具有一系列链接或按钮来向该页面添加更多表单。

我为每个模型制作了一些模型表格，可以将它们分别显示在页面上

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 = ['...']

我成功地将它们添加到列表中，并且可以迭代并添加它们

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 %}

再说一遍，我的问题是我想从一个许可证开始，然后有链接或按钮以根据需要添加每个表单。我在这里有点茫然，任何帮助将不胜感激。

编辑： 所以我有这样的基本许可证，当用户像这样导航时就会出现，并且我想让用户单击“添加下水道许可证”按钮或链接或其他

然后将获得相应的许可证

Answer 1

您可以使用formset在一页中动态创建多个相同的表单参见Documentation

也许这tutorial正是您想要的。

已编辑

如果我正确理解了您的问题，该怎么办？

首先，最好用字典将表单分开，而不要在 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)

然后在您的.html文件中，
如果您想添加一个表单每次单击按钮，我的窍门是：
首先显示您的基本许可表单（称为utility_form），单击添加其他表单的按钮，然后先隐藏您的其他表单。

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

然后使用jquery添加onclick侦听器，克隆该隐藏的表单，然后将其插入基本表单之后（实际上是在ID为additional-forms的div内）。

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

我还没有测试过，但是当您单击添加按钮时，应该给出如下结果：

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

希望它能回答您的问题：）

Answer 2

首先添加按钮
```
<button><button>
```
然后向其添加onclick属性，这将有助于对点击做出反应
```
<button onclick='do'><button>
```

然后创建包含用于显示其他表单功能的脚本

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

在一起

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

单击按钮即可在页面上添加多个表单

2 个答案:

已编辑

在一起