Flask wtf.quick_form运行一些 JavaScript 并设置表单变量
flask wtf.quick_form running some javascript and setting a form variable
我正在创建博客文章,到目前为止,我已经使用普通的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>
- 通过Javascript设置Telerik RadTreeView属性,如OnClientNodeExpanded
- 使用javascript设置iframe的高度
- 通过JavaScript设置表单目标
- 如何确定相对较新版本的IE的高度和宽度(IE8不喜欢从JavaScript设置这种样式吗?
- 通过JavaScript设置的表单字段的值不会作为$_POST的一部分传递给PHP脚本
- 如何在Internet Explorer中使用javascript设置cookie
- Javascript设置日期不起作用,显示错误的时间
- iOS Safari Javascript设置超时问题
- 使用Javascript设置库中图像包装器的宽度
- 如何检查日期选择器和时间选择器元素是否使用JQuery/Javascript设置
- 如何使用javascript设置元素旋转和动态观察的动画
- 在 PHP 块中使用 Javascript 设置 HTML 文本框的值(使用 echo)
- 通过javascript设置IE特定的css样式
- Javascript-设置cookie并拉入ID
- ASP从Javascript设置控件值
- 尝试使用window.innerHeight和Javascript设置图像高度
- 使用JavaScript设置整个页面的字体大小
- 使用纯Javascript设置最小高度属性
- 如何通过javascript设置支柱列表2
- 使用 JavaScript 设置 的点击