我想讓我的用戶編寫內容,並希望他們指定他們想要的標題數量。我已經創建了一個小小的Javascript函數來將新元素插入到將要提交的現有表單中。這目前看起來是這樣的:向Django中的表單動態添加新字段
openTextarea.js
var i = 1;
function opentextarea() {
"use strict";
var hr = document.createElement('hr');
var title = document.createElement('input');
title.type = 'text';
title.name = 'title_'+i;
title.placeholder = 'Your section title!';
title.className = 'form-control';
var input = document.createElement('textarea');
input.name = 'section_'+i;
input.className = 'tiny-mce-init';
var button = document.createElement('button');
var newSection = document.getElementById('newSection');
var form = document.getElementById('guide_form');
form.appendChild(hr);
form.appendChild(title);
form.appendChild(input);
loadTinyMCEEditor();
i++;
}
模板
{% extends "base.html" %}
{% load staticfiles %}
{% block body %}
<script type="text/javascript" src="{% static "tinymce/js/tinymce/tinymce.min.js" %}"></script>
<script type="text/javascript" src="{% static "javascripts/openTextarea.js" %}"></script>
<script type="text/javascript" src="{% static "javascripts/loadTinyMCEEditor.js" %}"></script>
<div style="width: 60%; margin: 0 auto;">
<hr>
<form id="guide_form" class="form-horizontal" method="POST" action="{{ request.get_full_path }}"> {% csrf_token %}
<fieldset>
{% if form.title.errors %}
<div class="class-group error">
<div class="controls">{{ field }}
<span class="help-inline">
{% for error in form.title.errors %}{{ error }}{% endfor %}
</span>
</div>
</div>
{% else %}
<div class="control-group">
<div class="controls">{{ form.title }}</div>
</div>
{% endif %}
<hr>
{% if form.public.errors %}
<div class="class-group error">
<div class="controls">Check, if you want to make your guide public {{ field }}
<span class="help-inline">
{% for error in form.public.errors %}{{ error }}{% endfor %}
</span>
</div>
</div>
{% else %}
<div class="control-group">
<div class="controls">Check, if you want to make your guide public {{ form.public }}</div>
</div>
{% endif %}
<hr>
Neutral cards
<hr>
{% for card in form.cards %}
{{ card }}
{% endfor %}
<hr>
</fieldset>
</form>
<hr>
<div id="newSection"></div>
<button class="btn btn-primary" type="button"
onclick="opentextarea();">
Add Section!
</button>
<hr>
<div class="form-actions" style="margin-top: 4px;">
<button type="submit" form="guide_form" class="btn btn-success">Submit</button>
</div>
</div>
{% endblock %}
當我檢查的元素,新的部分出現在表格。
顯然,新的部分是不是在form.cleaned_data
,因爲當我把它打印出來,我剛收到我最初跟我的表單創建的字段:
class CreateGuide(FormView):
template_name = 'hsguides/guide_create.html'
form_class = GuideForm
success_url = '/guides/search-guide/'
def get_form_kwargs(self, *args, **kwargs):
form_kwargs = super(CreateGuide, self).get_form_kwargs(**kwargs)
form_kwargs['hero'] = self.kwargs['hero']
return form_kwargs
def form_valid(self, form, *args, **kwargs):
# TODO
# - check if cards are actually from selected class...
# - implement sections
form.instance.author = self.request.user
form.instance.hero = Hero.objects.get(name=self.kwargs['hero'])
dust = 0
for card in form.cleaned_data['cards']:
dust += Card.objects.get(id=card.id).dust
for foo in form.cleaned_data:
print(foo)
form.instance.dust = dust
form.save()
return super(CreateGuide, self).form_valid(form)
的結果是
卡片
public
標題
,因爲我的形式看起來像這樣
class GuideForm(BootstrapModelForm):
class Meta:
model = Guide
exclude = ('author', 'created', 'modified', 'hero', 'dust', 'rating',)
def __init__(self, *args, **kwargs):
hero = kwargs.pop('hero', None)
super(GuideForm, self).__init__(*args, **kwargs)
if hero:
self.fields['cards'].queryset = Card.objects.filter(Q(card_class='neutral') |
Q(card_class=hero))
self.fields['title'].widget.attrs['placeholder'] = 'Title of your awesome guide!'
self.fields['public'].widget.attrs.update({'class': 'checkbox'})
一個如何可以動態地添加新的元素融入在Django一種形式,是有道理的?任何幫助或建議高度讚賞!
閱讀有關表單集 – madzohan