WTFormsで条件付きフィールドを挿入する方法は?

kramer65

Flaskを使用して構築しているWebサイトでは、フォームの検証にWTForms使用しています。現在、別のフィールドに依存するフィールドがあります。ユーザーが特定の年(2012)を挿入すると、Javascriptを使用していくつかのラジオボタンが挿入されます。RadioFieldをオプションにしました。これは正常に機能しますが、実際にラジオボタンを使用してフォームを送信した場合、その値は残りNoneます。

いくつかのコードを話すために; 関連する2つのフォームフィールドは次のように定義されています。

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() }}construction_year2012年の場合にいくつかのhtmlを挿入するJavascriptを削除して作成しました

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'どちらのエントリも含まれていません

kramer65

さて、壁に頭をぶつけて約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]

編集
0

コメントを追加

0

関連記事

分類Dev

Svelteで条件付きでフィールドを無効にする方法は?

分類Dev

Mongodbで条件付きフィールドを取得する方法

分類Dev

SQLの日付フィールドに日付を挿入する方法

分類Dev

Hibernateバリデーターでフィールドを条件付きで検証する方法は?

分類Dev

条件付きで1つのフィールドまたは別のフィールドを返す方法は?

分類Dev

挿入中にmongodbで必須フィールドを作成する方法は?

分類Dev

特定のフィールドで挿入を強制する方法は?

分類Dev

Scapy:条件付きフィールドのリストを実装する方法は?

分類Dev

djangoでフィールドに要素を挿入する方法

分類Dev

Angular、必須フィールドを条件付きでスタイル設定する方法は?

分類Dev

Jacksonを使用して条件付きでPOJOフィールドに逆シリアル化する方法は?

分類Dev

ユーザー入力に基づいて条件付きでフォームフィールドを表示する

分類Dev

日付フィールドにNULLを挿入する方法OracleSQL Developer

分類Dev

SQL日付フィールドにnull値を挿入する方法

分類Dev

PHPexcelが日付フィールドに一重引用符を挿入するのはなぜですか?

分類Dev

WTFormsにRadioButtonフィールドへの入力を要求させる方法は?

分類Dev

Beanメソッドにフィールドを挿入する方法は?

分類Dev

autofacを使用して外部dllをロードし、条件付きで複数の実装を挿入する方法

分類Dev

jQueryを使用してフィールドを挿入する方法は?

分類Dev

xml.etree.ElementTreeを使用してPythonのノードに条件付きで属性を挿入する方法

分類Dev

Oracleに条件付きで挿入する方法は?

分類Dev

マングースでの集計中にフィールドを条件付きで投影する方法

分類Dev

Meteor 1.0でCSSファイルを条件付きでロード/バンドルする方法は?

分類Dev

boto3を使用して条件付きで項目をdynamodbテーブルに挿入する方法

分類Dev

Laravelに複数のフィールドを挿入する方法は?

分類Dev

条件付きのCrystalReportでデータベースフィールドを非表示にする方法

分類Dev

match..withを使用して、条件付きでシーケンス式に値を挿入する最良の方法は?

分類Dev

モデルでの条件付きフィールドを処理するための最良の方法

分類Dev

mongodbでの集計中にフィールドを条件付きで投影する方法

Related 関連記事

  1. 1

    Svelteで条件付きでフィールドを無効にする方法は?

  2. 2

    Mongodbで条件付きフィールドを取得する方法

  3. 3

    SQLの日付フィールドに日付を挿入する方法

  4. 4

    Hibernateバリデーターでフィールドを条件付きで検証する方法は?

  5. 5

    条件付きで1つのフィールドまたは別のフィールドを返す方法は?

  6. 6

    挿入中にmongodbで必須フィールドを作成する方法は?

  7. 7

    特定のフィールドで挿入を強制する方法は?

  8. 8

    Scapy:条件付きフィールドのリストを実装する方法は?

  9. 9

    djangoでフィールドに要素を挿入する方法

  10. 10

    Angular、必須フィールドを条件付きでスタイル設定する方法は?

  11. 11

    Jacksonを使用して条件付きでPOJOフィールドに逆シリアル化する方法は?

  12. 12

    ユーザー入力に基づいて条件付きでフォームフィールドを表示する

  13. 13

    日付フィールドにNULLを挿入する方法OracleSQL Developer

  14. 14

    SQL日付フィールドにnull値を挿入する方法

  15. 15

    PHPexcelが日付フィールドに一重引用符を挿入するのはなぜですか?

  16. 16

    WTFormsにRadioButtonフィールドへの入力を要求させる方法は?

  17. 17

    Beanメソッドにフィールドを挿入する方法は?

  18. 18

    autofacを使用して外部dllをロードし、条件付きで複数の実装を挿入する方法

  19. 19

    jQueryを使用してフィールドを挿入する方法は?

  20. 20

    xml.etree.ElementTreeを使用してPythonのノードに条件付きで属性を挿入する方法

  21. 21

    Oracleに条件付きで挿入する方法は?

  22. 22

    マングースでの集計中にフィールドを条件付きで投影する方法

  23. 23

    Meteor 1.0でCSSファイルを条件付きでロード/バンドルする方法は?

  24. 24

    boto3を使用して条件付きで項目をdynamodbテーブルに挿入する方法

  25. 25

    Laravelに複数のフィールドを挿入する方法は?

  26. 26

    条件付きのCrystalReportでデータベースフィールドを非表示にする方法

  27. 27

    match..withを使用して、条件付きでシーケンス式に値を挿入する最良の方法は?

  28. 28

    モデルでの条件付きフィールドを処理するための最良の方法

  29. 29

    mongodbでの集計中にフィールドを条件付きで投影する方法

ホットタグ

アーカイブ