如何使用 JQuery 访问 WTForm答案

【问题标题】：How access WTForm with JQuery如何使用 JQuery 访问 WTForm
【发布时间】：2019-02-08 20:10:37
【问题描述】：

我想就访问 WTForm 字段寻求帮助：

我有以下表格：

class model_bolt_InputForm(FlaskForm):

    # Bolt Inputs
    bolt_size =                 SelectField('Bolt size [mm]', choices=[('M6', 'M6'),('M8', 'M8'),('M10', 'M10'), ('M12', 'M12'), ('M16', 'M16'), ('M20', 'M20'), ('M24', 'M24'), ('M30', 'M30'), ('M36', 'M36'), ('M42', 'M42'), ('M48', 'M48'), ('M56', 'M56'), ('M64', 'M64')], default='M12')
    bolt_grade =                SelectField('Bolt grade [-]', choices=[('4.6','4.6'), ('4.8','4.8'), ('5.6','5.6'), ('5.8','5.8'), ('6.8','6.8'), ('8.8','8.8'), ('9.8','9.8'), ('10.9','10.9'), ('12.9','12.9')], default='8.8')
    bolt_preload =              FloatField( label=' Bolt preload [N]', default=32360)
    friction_coefficient =      FloatField( label=' Thread friction coefficient [-]', default=0.2)
    preload_type =              RadioField( label='Select preload type', choices=[(1,'Apply torque'),(2,'Apply Axial preload'),(3,'Ratio of total Tensile Strength')], default=2)

我的html：

<button id="btn1">Button 1</button>
<p class="para1">sdiuc siduch siudch siudch siudhc siudch siduch </p>

<script>

        $(document).ready(function(){

            $('#btn1').click(function(){

                $('.para1').toggle();
                alert(**form.bolt_preload.data**);

            });

        });

</script>

如果我单击该段落隐藏的按钮，但尝试打印 bolt_preload 字段的值时出现错误。有人可以给我一个关于如何做到这一点的提示吗？

如果点击后更改 Filed 中的值而不是打印它呢？

谢谢雅库布

【问题讨论】：

你能添加你的view函数吗？您必须将数据填充到表单中

标签： python jquery flask flask-wtforms

【解决方案1】：

您无法以您尝试的方式访问模板中的表单数据。如果您使用 javascript 从表单中获取数据，那么。如果您没有为表单元素指定 ID，WTForm 将使用变量名称作为 id 属性以及 HTML 输入的名称属性来呈现它们。您可以使用它通过 id 使用 javascript/jquery 选择该输入您的 jquery 代码应如下所示。

<script>

        $(document).ready(function(){

            $('#btn1').click(function(){

                $('.para1').toggle();
                var boltPreloadInput = $('#bolt_preload');
                alert(boldPreloadInput.val());

            });

        });

</script>

当您使用 WTForms 时，您的表单元素会在页面加载时呈现为 HTML 输入。页面加载后，您无法像尝试那样访问客户端的表单数据。在不先将数据发送到服务器的情况下，在点击事件上与表单交互的唯一方法是使用 javascript。

【讨论】：