2015-10-27 63 views
3

我想讓我的用戶編寫內容,並希望他們指定他們想要的標題數量。我已經創建了一個小小的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 %} 

當我檢查的元素,新的部分出現在表格。

enter image description here

顯然,新的部分是不是在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一種形式,是有道理的?任何幫助或建議高度讚賞!

+1

閱讀有關表單集 – madzohan

回答

3

您可以在調用super後添加它們。

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) 

     # add your fields here 
     self.fields['title_1'] = forms.CharField() 

你可以看看這個很好的例子https://stackoverflow.com/a/6142749/2698552

+0

嘛,因爲你的答案是唯一一個你是幸運的獲得賞金:PI看到這個問題,您在您的文章中引用之前,我問我的問題,但不能做任何事情。我用這個問題的名譽的原因是,所以人們可以在更具體的層面上幫助我解決問題。但是,永遠......這是賞金:) –