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

Posted 2023-02-24

【中文标题】通过使用javascript单击按钮动态添加django表单

【英文标题】：add django forms dynamically by clicking button using javascript

【发布时间】：2015-09-21 01:54:33

【问题描述】：

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

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)

我找不到如何更改此模板视图中单击的变量。我应该如何使用按钮来更改点击值？或者如果您有更好的解决方案，我应该为这个问题做些什么？有人告诉我，这是更多的 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，所以我不明白代码中有什么问题。你能告诉我如何修复这个代码吗？

【问题讨论】：

我认为您将服务器端逻辑与客户端逻辑混为一谈。这是什么：% if clicked == 1%？

这是我在使用 javascript 之前的逻辑。我把它留在那里是因为我最初认为这可以在没有 javascript 并且只使用 django 的情况下完成。 (% if clicked == 1%) - 是 django 代码，现在不在当前代码中。

【参考方案1】：

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

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

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

但在所有情况下，您都需要使用 inlineformset_factory (docs)，以便保存表单的多个实例。

【讨论】：

感谢帮助！如果您对我的解决方案感兴趣，请查看我的第二个问题。

更改了对您的答案：D 导致我之前对表单集的解决方案仍在更改。希望不需要使用它们，但事情变得很烦人。

【参考方案2】：

这里有几个问题。

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

对于这个问题的答案，就是 VoteType 和 VoteForm 的 Typo。

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