问Django dynamic forms - on-the-fly field population？
EN

Stack Overflow用户

提问于 2012-01-25 05:49:42

回答 2查看 25.2K关注 0票数 21

我整个下午都在浏览Django文档和谷歌搜索结果，但我仍然有点卡在创建动态表单的尝试中。我希望我只需要有人把我推向正确的方向:-)我刚刚开始学习Django，所以我仍然是一个非常初学者；然而，我已经是一个中级python用户了。

我要做的是创建一个动态表单，其中用户从下拉菜单中进行选择，然后根据该选择，表单的另一部分将自动更新，以显示与当前所选项目相关的结果，但显示的结果来自另一个数据库表。

我将尝试使用Django教程中的模型的简化版本来更好地说明我正在尝试做的事情：

# models.py
from django.db import models

class Poll(models.Model):
    question = models.CharField(max_length=200)

class Choice(models.Model):
    poll = models.ForeignKey(Poll)
    choice = models.CharField(max_length=200)

因此，假设我想要一个下拉选择字段，填充数据库中每个Poll的问题。我还想有一个文本字段，它显示了当前选择的投票对应的选择，这将更新在飞行中，每当用户选择一个不同的池。我已经能够通过放置一个按钮并将信息发送回表单来解决这一问题；但是，我正在尝试在用户做出选择时自动执行此操作。我的视图现在看起来像这样：

#view.py
from django import forms
from django.shortcuts import render_to_response

from myapp.models import Poll,Choice

class MyModelChoiceField(forms.ModelChoiceField):
    def label_from_instance(self, obj):
        return "%s" % obj.question

class PollSelectionForm(forms.Form):
    polls = MyModelChoiceField( queryset=Poll.objects.all() )

class ChoiceResults(forms.Form):
    def __init__(self, newid, *args, **kwargs):
        super(ChoiceResults, self).__init__(*args, **kwargs)

        self.fields['choice'] = forms.TextField( initial="" )

def main(request):
    return render_to_response("myapp/index.html", {
        "object": PollSelectionForm(), 
        "object2": ChoiceResults(),
    })

我的模板非常简单，就像这样

{{ object }}
{{ object2 }}

我确信我创建表单的方式可能也不是最好的，所以也请随意批评:-)正如我所提到的，我已经读到了涉及重新发布表单的解决方案，但我希望这能在运行中发生……如果我可以透明地转发，那么我想那就没问题了。我也看到过可以让你动态创建表单的库，但这似乎有点过头了。

django-forms

django

单节点MySQL

低成本高体验，解决您的基础业务数据需求

回答 2

Stack Overflow用户

回答已采纳

发布于 2012-01-25 05:59:54

这里有一种方法-- Django/jQuery Cascading Select Boxes?

您可以创建一个仅将json呈现为字符串的新视图，然后在完成从第一个列表中进行选择时触发一个事件，该列表动态地从该json加载数据。

票数 6

Stack Overflow用户

发布于 2012-01-25 09:45:26

我在这里做了类似的事情，根据下拉列表中的选择填充表单。也许这对你有帮助。

下面是用于预先填充表单的值的模型：

class OpmerkingenGebrek(models.Model):
    opmerking = models.CharField(max_length=255)
    advies = models.CharField(max_length=255)
    urgentiecodering = models.CharField(max_length=2, choices=URGENTIE_CHOICES_2011)
    bepaling = models.CharField(max_length=155,blank=True,null=True)
    aard = models.CharField(max_length=3, choices=AARD_CHOICES)

管理表单的视图：

def manage_component(request,project_id,.....):
    # get values for pre-populate
    og = OpmerkingenGebrek.objects.all()
    .........
    formset = ComponentForm(request.POST,request.FILES)
    .........
        )))
    return render_to_response(template, {
        'formset':formset,
        ........
        'og':og,
        },context_instance=RequestContext(request))

呈现表单的html

{% extends "base.html" %}
{% block extra_js %}
<script type="text/javascript" src="/media/js/limitText.js"></script>
<script type="text/javascript" src="/media/js/getValueOpmerking.js"></script>
{% endblock %}
<form enctype="multipart/form-data" method="post" action="">
{{ formset.as_table }}
</form>

<p>Choose default values:</p>
<select id="default" onChange="getValue(this)">
    {% for i in og %}
    <option value="{{ i.opmerking }} | {{ i.advies }} |  {{ i.urgentiecodering }} | 
    {{ i.aard }} | {{ i.bepaling }}">{{ i.opmerking }}</option>
    {% endfor %}
</select>

预先填充表单的javascript：

函数getValue(sel)

  {
    //get values
    var opm = sel.options[sel.selectedIndex].value;
    //split string to parts
    var parts = opm.split("|");
    // autofill form
    var opmerking = document.getElementById("id_opmerking");
    opmerking.value = parts[0];
    var aanbeveling = document.getElementById("id_aanbeveling");
    aanbeveling.value = parts[1];
    var opt = document.getElementById("id_urgentie");
    var urgentie = opt.selectedIndex;
    for(var i=0;i<opt.length;i++){
        if(opt.options[i].value == parts[2].split(' ').join('')){
            opt.selectedIndex = i;
       }};

    var opt = document.getElementById("id_aard");
    var aard = opt.selectedIndex;
    for(var i=0;i<opt.length;i++){
      if(opt.options[i].value == parts[3].split(' ').join('')){
          opt.selectedIndex = i;
          }};

    var bepaling = document.getElementById("id_bepaling");
    bepaling.value = parts[4];
  };