Django动态形式 - 即时现场人口?

时间:2012-01-25 05:49:42

标签: django django-forms

我一直在扫描Django文档和Google搜索结果,整个下午,我仍然有点陷入尝试创建动态表单的过程中。我希望我只需要有人在正确的方向上推动我:-)我刚刚开始学习Django,所以我还是一个初学者;但是,我已经是一个中级python用户了。

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

我将尝试使用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)

所以我想说我希望有一个类似下拉选择字段的东西,填充数据库中每个轮询的问题。我还想要一个文本字段,它显示当前所选轮询的相应选项,只要用户选择不同的池,它就会即时更新。我已经能够通过放置一个按钮并将信息发回表单来解决这个问题。但是,我正在尝试在用户进行选择时自动执行此操作。我的观点目前看起来像这样:

#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 }}

我确定我创建表单的方式可能也不是最好的,所以也可以随意批评:-)正如我所提到的,我已经阅读了涉及重新发布表单的解决方案,但是我希望这可以即时发生......如果我可以透明地重新发布那么我认为这样会很好。我也看过可以让你动态创建表单的库,但这看起来有些过分。

2 个答案:

答案 0 :(得分:6)

以下是一种方法 - Django/jQuery Cascading Select Boxes?

您可以创建一个只将json呈现为字符串的新视图, 当你从第一个从json动态加载数据的列表中选择时,触发一个事件。

答案 1 :(得分:3)

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

以下是用于预填充表单的值的模型:

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:

function 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];
  };