2011-04-24 84 views
0

我想在django中生成动态表单。假设我有一个模型,其中包含由所有形式的字段组成的选择。如果我的用户选择Textarea选项并给出标签名称,则表单将显示带有给定标签的textarea。这可能是一个TextInput,单选按钮等在Django中生成表格

所以我的模型看起来像:

TYPE_CHOICES = (
    (u'TextField',u'TextField'), 
    (u'TextArea',u'TextArea'), 
) 

class SocietyForm(models.Model): 
    title = models.CharField(max_length=255) 
    slug = models.SlugField() 
    form_info = models.ForeignKey(FormInfo) 


class FormInfo(models.Model): 
    label = models.CharField(max_length=255) 
    content_type = models.CharField(max_length=100,choices=TYPE_CHOICES) 
    form_info = models.ForeignKey(SocietyForm) 

到目前为止好,但是当涉及到生成窗口小部件,以及我不知道这里=) 我想,如果我根据选定的选项生成字典,那么我可以将它分配给窗体的小部件。

'''                                                               
def select_form_type(instance):                                                        
    dict = {}                                                             
    if instance.content_type == "TextField":                                                     
     dict.update({'%s'instance.label:forms.TextInput()})                                                 
    else:                                                              
     dict.update({'%s'instance.label:forms.Textarea()})                                                 
    return dict                                                            
''' 

#class SocietyJoinForm(forms.ModelForm,instance): 

但是,SocietyJoinForm不能识别实例输入。那么有什么想法?

回答

0

我只是碰巧遇到了所有较旧的问题。让我知道你是否已经知道了这一点。

IMO,最简单的方法是使用Javascript。除非你创建了自己的表单对象,否则你实际上无法在Django中改变它,在这种情况下,你很可能仍然需要使用Javascript。你可以这样做:

<script type="text/javascript"> 
    function display_form_obj(){ 
     var type_selection = document.getElementById('id_content_type'); 
     var label = document.getElementById('id_label'); 
     var dyn_obj = document.getElementById('id_dyn_obj_div'); 
     if(type_selection.value and label.value){ 
      // Display the new object 
      if(type_selection.value == 'TextField'){ 
       dyn_obj.innerHTML = '<textarea ...>'; // Fill it with the info you need 
      } 
      else { 
       dyn_obj.innerHTML = '<input type="text" ...>'; // Fill with needed info 
      } 
     } 
     else { 
      dyn_obj.innerHTML = ''; 
     } 
    } 

    function set_form_obj_events(){ 
     var type_selection = document.getElementById('id_content_type'); 
     var label = document.getElementById('id_label'); 
     if(label.addEventListener){ 
      // Netscape, FF 
      type_selection.addEventListener('change', display_form_obj, false); 
      label.addEventListener('change', display_form_obj, false); 
     } 
     elif(label.attachEvent){ 
      // IE 
      type_selection.attachEvent('onchange', display_form_obj); 
      label.attachEvent('onchange', display_form_obj); 
     } 
    } 

</script> 
... 
<form ... onload="set_form_obj_events();"> 
    {{form.content_type}} 
    {{form.label}} 
    <div id="id_dyn_obj_div"></div> 
    ... 
</form> 

希望有所帮助。