通过使用javascript单击按钮动态添加Django表单

Question

好。 因此，我试图创建一种表单，以便当我单击“ +”按钮时，新表单出现在现有表单的下方。 例如我有填写姓名的表格

VoteType
name: [        ]
{+}  -- (button)

当点击“ +”

表格看起来像这样

VoteType
name: [        ]

Vote1 name [        ]
      image [        ]
      date [        ]

{+} -- (button)

和“ +”按钮，以便我可以根据需要添加Vote2...。

我试图寻找实现方法，但是找不到任何解决方案。

这是我当前在views.py中的createview：

def create(request):
    voteTypeForm = VoteTypeForm(request.POST or None)
    voteForm = VoteType(request.POST or None)
    clicked = 0
    instance = voteTypeForm.save(commit=False)
    instance.pub_date = timezone.now()
    instance.save()
    #print instance.pub_date
    context = RequestContext(request,{
            'voteTypeForm': voteTypeForm,
            'clicked': clicked,
            'voteForm': voteForm,
    })
    return render(request, 'Vote/create.html', context)

我找不到从此模板更改视图中点击的变量的方法。 如何使用按钮来更改点击值？ 或者，如果您有更好的解决方案，该怎么办？ 有人告诉我，这是更多的JavaScript问题，而不是Django代码。 所以我编辑了代码create.html，添加了javascript ：（ 从此处获得了代码 ）

<form method = 'POST' action = ''>{%csrf_token %}
    {{ voteTypeForm }}
    <input type = 'submit' value="create"/>
</form>
<fieldset id="fieldset">
    <legend id="legend">Voting Candidates</legend>
    <div id="placeholder">
        <form method = 'POST' action = ''>{%csrf_token %}
            {{ voteForm }}
        </form>
    </div> <!-- placeholder -->
    <p><button type="button" name="Submit" onclick="Add();">+</button></p>
</fieldset>
<script>
    var _counter = 0;
    function Add() {
        _counter++;
        var oClone = document.getElementById("template").cloneNode(true);
        oClone.id += (_counter + "");
        document.getElementById("placeholder").appendChild(oClone);
    }
</script>

但是此代码也不起作用。 我对javascript很不好，所以我不明白代码中的错误。 您能告诉我如何解决此代码吗？

Answer 1

我有类似的需求，最终修改了此underscore.js教程 。

另一个用户解释了他们如何使用同一教程，但此处未使用下划线。

它们都相当广泛，因此在这里我不会再创建任何东西。

不过，在所有情况下，都需要使用inlineformset_factory （ docs ），以便可以保存表单的多个实例。

Answer 2

这里有几个问题。

最主要的是我在视图中编写了VoteType而不是VoteForm。 那把一切搞砸了。 修复后，我在显示带有正确数字的表单时遇到了问题，并且不想首先显示在HTML中，而是希望将其存储在javascript中。 对于这些问题，我向第二个问题求助。 将在此处提供针对这些问题的完整代码解决方案。

对于这个问题的答案，可能只是VoteType和VoteForm的错别字。

我修复了代码，添加了一些部分，解决方案是这样的。