如何使用javascript更改HTML中的Flask WTForm字段值?

表单的输入字段创建如下,其中可以使用标签或验证器等附加参数。

class ExampleForm(FlaskForm):
    response = HiddenField()
    submit = SubmitField()

需要以下代码才能在服务器端请求值。

@app.route('/', methods=['GET', 'POST'])
def index():
    form = ExampleForm(request.form)
    if form.validate_on_submit():
        print(form.response.data)
    return render_template('index.html', **locals())

如果现在在模板内渲染,则会自动设置属性名称和id。该值对应于分配了输入字段的变量的标识符。要查询和设置该值,可以使用带有name属性或输入字段id的选择器。

<form method="post">
  {{ form.csrf_token }}
  {{ form.response }}
  {{ form.submit }}
</form>

<script type="text/javascript">
  (() => {
    
    const token = 'your token here';
    let responseField;
    
    // Selecting the input field based on the id attribute, 
    responseField = document.getElementById('response');
    responseField.value = token;

    // or select based on the name attribute.
    responseField = document.querySelector('input[name="response"]');
    responseField.value = token;

  })();
</script>