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

Question

好的。所以我正在尝试创建一个表单，以便当我按下按钮“+”时，一个新表单会出现在现有表单下方。例如我有表格填写姓名

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

当点击“+”时

表单将如下所示

VoteType
name: [        ]

Vote1 name [        ]
      image [        ]
      date [        ]

{+} -- (button)

和按钮“+”，这样我就可以添加 Vote2 ... 想添加多少就添加多少。

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

这是我当前在 views.py 中创建的视图：

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)

我无法从该模板中找到如何更改我的视图中的变量 clicked。我应该如何使用按钮来更改点击值？或者如果您有更好的解决方案，我应该如何解决这个问题？我被告知这是更多 javascript 问题而不是 Django 代码。所以我编辑了代码 create.html 代码添加 javascript: (got the code from here)

<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

我有类似的需求，最后修改了 this underscore.js tutorial。

另一个用户解释了他们如何使用相同的教程但不使用下划线 here。

它们都非常广泛，所以我不打算在这里重新创建任何东西。

尽管如此，在所有情况下，您都需要使用 inlineformset_factory (docs)，这样您就可以保存表单的多个实例。

Answer 2

这里有几个问题。

主要是我在视图中写了 VoteType 而不是 VoteForm。这把一切都搞砸了。修复该问题后，我在显示具有正确编号的表单时遇到了问题，并且不想首先显示在 HTML 中，而是希望将其存储在 javascript 中的某个位置。对于这些问题，我在上寻求帮助。这些问题的完整代码解决方案将在那里提供。

这个问题的答案，就是 VoteType 和 VoteForm 的错别字。

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

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

add django forms dynamically by clicking button using javascript

javascript

django

django-forms

python-2.7