Flask wtf.quick_form运行一些 JavaScript 并设置表单变量

flask wtf.quick_form running some javascript and setting a form variable

本文关键字:JavaScript 设置 表单 变量 quick wtf form 运行 Flask      更新时间:2023-09-26

我正在创建博客文章,到目前为止,我已经使用普通的html表单完成了它。 我正在做的一个时髦的想法是运行javascript onclick并在表单中设置一个隐藏变量,其中包含页面中的额外数据。 这被很好地传递给了服务器,并通过request.form得到了。 现在我想使用wtf.quick_form来输入博客文章。 qtf.quick_form适用于简单的事情,但现在我需要在单击时运行一些 javascript,然后设置一个表单变量。 在服务器上,我需要检索此表单变量。 有谁知道如何做到这一点?

例如,我尝试了这个:

{{ wtf.form_field(form.submit, button_map={'submit':'new_entry_submit_button'}) }}
{{wtf.quick_form(form)}} 

然后像这样用jquery截取提交按钮:

$(function(){        
    $('#new_entry_submit_button').bind('click', function(e) {        
        x = getSavedAndClickedAsString();
        document.getElementsByName("srcLibArticles").item(0).value =  x; <!--libArStr; -->
        return true
    });
});

更不用说,这些都不起作用,我无法在表单中设置"隐藏"字段。 我不知道如何在页面的表单中设置字段。 这一切都是在引擎盖下处理的。

编辑:

我为我的表单找到了一个隐藏字段类型,所以我在服务器上包括我的烧瓶表单的外观:

class NewEntry(Form):
    '''
        A form for new entries
    '''
    title = TextAreaField("Title", validators=[Required()])
    text = PageDownField("Text", validators=[Required()])
    tags = TextAreaField("Tags", validators=[Required()])
    srcLibEntries = HiddenField("srcLibEntries")
    submit = SubmitField('Submit')

我正在尝试编写 javascript,在提交时更新隐藏字段并将更新的隐藏字段发送回服务器。

编辑2:我已经写了以下html,它几乎可以工作,但仍然有一些奇怪的事情发生:

<form  method="post" role="form">       
    {{ wtf.form_field(form.title) }}
    {{ wtf.form_field(form.text) }}
    {{ wtf.form_field(form.tags) }}
    {{ wtf.form_field(form.srcLibEntries, id="srcLibArticles") }}
    {{ wtf.form_field(form.submit, button_map={'id':'new_entry_submit_button'}) }}
</form>

最值得注意的是,提交按钮的 id 不会更改。 此外,它还为隐藏输入创建标签(设置为表单变量名称)并打印标签。 隐藏的输入在那里,但一个烦人的标签也在那里,它会向页面添加文本。

编辑3:

我发现你可以像这样在 python 中设置表单字段的 id,就像这样 forms.py。 (最终,这就是我的工作方式) :

class NewEntry(Form):
    '''
        A form for new entries
    '''
    title = TextAreaField("Title", validators=[Required()])
    text = PageDownField("Text", validators=[Required()])
    tags = TextAreaField("Tags", validators=[Required()])
    srcLibEntries = HiddenField(label=None, id="srcLibArticles")
    submit = SubmitField('Submit', id="new_entry_submit_button")

下面是一个非常简单的示例,说明如何使用 WTForms 使用 Flask-Bootstrap 创建表单(因为您似乎正在代码中执行此操作):

<form class="form form-horizontal" method="post" role="form">
  {{ form.hidden_tag() }}
  {{ wtf.form_errors(form, hiddens="only") }}
  {{ wtf.form_field(form.field1) }}
  {{ wtf.form_field(form.field2) }}
</form>

以上是手动的。这是不假思索:

{{ wtf.quick_form(form) }}

要回答你的问题,这很难做到,因为你没有向我们展示任何错误。但有一点是

$("#new_entry_submit_button")

id 属性的 jQuery 选择器。要在 Flask-Bootstrap 中进行设置,请使用:

{{ wtf.quick_form(form, id="whatever") }}

或:

<form class="form form-horizontal" method="post" role="form">
  {{ form.hidden_tag() }}
  {{ wtf.form_errors(form, hiddens="only") }}
  {{ wtf.form_field(  form.field1(id='whatever')  ) }}
  {{ wtf.form_field(form.field2) }}
</form>