Dynamic Down Down Flask-wtf

时间:2017-11-29 19:42:35

标签: python-3.x flask-wtforms

我对此感到很沮丧。我想我已经仔细研究过人们遇到的类似问题,但似乎无法突破。 我有一对下拉菜单:第一个有3个选项的列表,第二个填充相同的列表,无论你从第一个选择中选择哪个。所有这一切都有效。我的问题是第二个不会验证,抛出'Not a valid choice'错误。谷歌搜索让我怀疑对象类型的问题。它是str的结果,我看到SelectField的默认行为是coerce = unicode。我试图强行作为str而没有成功。无论如何,我将不胜感激任何帮助。以下是我的相关代码:

template.py -

{% extends "header.html" %}
{% import "bootstrap/wtf.html" as wtf %}

{% block body %}
<form method="POST" action="/form_test/">
    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
    <div class="form-group col-md-4 text-left">
        <h3 align="center">Router 1</h3>
            {{ wtf.form_field(form.isp_r1) }}
    </div>
    <div class="form-group col-md-4 text-left">
        <h3 align="center">Router 1</h3>
            {{ wtf.form_field(form.isp_r2) }}
    </div>
     <div class="container">
        <button type="submit" class="btn btn-primary" value="Create">Submit</button>
    </div>
</form>

forms.py

from flask_wtf import FlaskForm
from wtforms import BooleanField, StringField, IntegerField, SelectField
from wtforms.validators import InputRequired, required, Length, IPAddress, ValidationError, NumberRange
class test_form(FlaskForm):
    isp_r1 = SelectField('ISP', validators=[required()], coerce=str, choices=[("", "Please Choose"), ("1", "AT&T"), ("2", "Level3"), ("3", "Sprint")], render_kw={"placeholder": "San Antonio, TX", "onchange": "populateispwtf(this.id,'isp_r2')"})
    isp_r2 = SelectField('ISP', coerce=str, validators=[InputRequired()], choices=[("", "---")])

custom.js -

function populateispwtf(s1,s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if(s1.value == "1") {
        var optionArray = ["|",
                           "2|Level 3",
                           "3|Sprint",];
    } else if(s1.value == "2") {
        var optionArray = ["|",
                           "1|AT&T",
                           "3|Sprint",];
    } else if(s1.value == "3") {
        var optionArray = ["|",
                           "1|AT&T",
                           "2|Level 3",];

    } console.log(optionArray);
    for(var option in optionArray) {
        var pair = optionArray[option].split("|");
        var newOption = document.createElement("option");
        newOption.value = pair[0];
        newOption.innerHTML = pair[1];
        s2.options.add(newOption);
    }
}

1 个答案:

答案 0 :(得分:1)

这确实没有得到任何流量,但为了任何可能遇到同样问题的人:

'不是一个有效的选择'实际上是指wtform本身的选择列表。 (choices = [('val1','Choice 1 Text'),('val2','Choice 2 Text')]等。因为我在使用javascript来填充选择字段之后已经渲染了,所以html已经改变但是可用的选择没有,就wtforms而言。解决方案在预验证中,我找到了解决方案here,所以归功于Mark Hildreth

我不打算重复他说的话,因为我的解决方案是他的直接提升。我只是想指出他以防万一有人选择动态的selectfields(和级联菜单),先发现我的帖子。