如何使用WTForms插入条件字段？

克拉默65

在使用Flask构建的网站中，我使用WTForms进行表单验证。我目前有一个字段，该字段取决于另一个字段：如果用户插入特定年份（2012年），则会使用Javascript插入几个单选按钮。我将RadioField设置为可选，这很好用，但是如果我确实使用单选按钮提交了表单，则其值仍然保留None。

讲一些代码；两个相关的表单字段定义如下：

construction_year = IntegerField('construction_year')
transfer_tax_rate = SelectField('transfer_tax_rate', validators=[Optional()], choices=[('ZERO', '0%'), ('SIX', '6%')])

我首先在模板中用于显示construction_year和的代码transfer_tax_rate如下：

{{ form.construction_year(size=10) }}
{{ form.transfer_tax_rate() }}

这很好用；我可以像这样在后端打印出值：

if form.validate_on_submit():
    print form.construction_year.data  # prints out '2012'
    print form.transfer_tax_rate.data  # prints out ZERO or SIX depending on my choice

然后{{ form.transfer_tax_rate() }}，我删除并编写了一些Javascript，如果Javaconstruction_year是2012，则会插入一些html ：

function displayTransferTaxRate(){
    var year = $("#construction_year").val();
    var propertyType = $("#property_type").val();
    if (year.length == 4 && year == 2012) {
        var transferTaxRateHtml = 'Applicable tax rate <select id="transfer_tax_rate" name="transfer_tax_rate"><option value="ZERO">0%</option><option value="SIX">6%</option></select>';
        $('#transfer-tax-rate-div').html(transferTaxRateHtml);
    } else {
        $('#transfer-tax-rate-div').html('');
    }
}
$("#construction_year").on('keyup paste', displayTransferTaxRate);

便于阅读；它插入的html如下：

<select id="transfer_tax_rate" name="transfer_tax_rate">
    <option value="ZERO">0%</option>
    <option value="SIX">6%</option>
</select>

html插入正确，我可以选择其中一个选项。但是，当我提交表单并尝试按以下方式获取transfer_tax_rate的值时，它总是打印出来None：

if form.validate_on_submit():
    print form.construction_year.data  # prints out '2012'
    print form.transfer_tax_rate.data  # prints out None

有人知道我在做什么错吗？欢迎所有提示！

[编辑]按照下面user3147268的提示，我也尝试过从标准烧瓶中获取提示request.form，但这两个都不包含任何条目'transfer_tax_rate'。

克拉默65

好吧，将我的头撞到墙上大约5个小时后，我会回答我自己的问题，因为你们可能还不知道。

事实证明，它与嵌入此表单的表有关。我忽略了这些信息，因为我不希望这是无关紧要的。

所以这很好用：

<table>
    <form action="" method="post" id="prop-form">
        {{ form.hidden_tag() }}
        <tr>
            <td>Construction year: </td>
            <td>
                {{ form.construction_year(size=10) }}
            </td>
        </tr>
        <tr>
            <td>Transfer tax rate: </td>
            <td>
                {{ form.transfer_tax_rate()
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Save property"></td>
        </tr>
    </form>
</table>

但是，当我在此div中添加完全相同的html时，它将不再起作用：

<table>
    <form action="" method="post" id="prop-form">
        {{ form.hidden_tag() }}
        <tr>
            <td>Construction year: </td>
            <td>
                {{ form.construction_year(size=10) }}
                <div id="transfer-tax-rate-div"></div>
            </td>
        </tr>
        <tr>
            <td></td>
            <td><input type="submit" value="Save property"></td>
        </tr>
    </form>
</table>

但是，如果没有它周围的桌子，它确实可以工作：

<form action="" method="post" id="prop-form">
{{ form.hidden_tag() }}
Construction year: {{ form.construction_year(size=10) }} <br />
<div id="transfer-tax-rate-div"></div>
<input type="submit" value="Save property">
</form>

事实证明，解决方案在于<form>标记的位置，因为如果像最后一段代码那样将它们移出表，则一切正常：

<form action="" method="post" id="prop-form">
{{ form.hidden_tag() }}
<table>
    <tr>
        <td>Construction year: </td>
        <td>
            {{ form.construction_year(size=10) }}
            <div id="transfer-tax-rate-div"></div>
        </td>
    </tr>
    <tr>
        <td></td>
        <td><input type="submit" value="Save property"></td>
    </tr>
</table>
</form>

请原谅我打扰你们所有男孩和女孩的时间，但没有提供所有相关信息。谢谢您给予我继续努力的能量！

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。