如何使用jQuery访问WTForm [英] How access WTForm with JQuery

问题描述

我想寻求有关访问WTForm字段的帮助:

I would like to ask for help with accessing WTForm fields:

我有以下表格:

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字段的值时出现错误.有人可以给我提示该怎么做吗?

If i click the button the paragraph hides but I am getting error with trying to print value of bolt_preload field. Can someone give me a hint on how to do that?

在单击时更改归档"中的值而不是打印该值是什么?

What about changing the value in Filed upon click instead of printing it?

谢谢 雅各布

推荐答案

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

You cannot access form data in your template the way you are trying to. If you are using javascript to get data from the form then. IF you don't specify an ID for your form elements, WTForm will render them using the variable name as the id attribute as well as the name attribute pf the HTML input. You can use that to select that input by id using javascript/jquery Your jquery code should look like this.

<script>

        $(document).ready(function(){

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

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

            });

        });

</script>

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

When you use WTForms, your form elements render to HTML inputs on page load. Once the page is loaded, you cannot access form data on the client side like you are trying. The only way to interact with the form on click events without first sending the data to the server is by using javascript.

这篇关于如何使用jQuery访问WTForm的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！