flask wtf.quick_form 运行 some javascript 并设置一个表单变量

Question

我正在创建博客文章，到目前为止，我使用的是正常的 html 表单。一个时髦的想法是运行ning 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
    });
});

None 更不用说了，我无法在表单中设置 "hidden" 字段。我不知道如何在页面的表单中设置字段。这些都是在幕后处理的。

编辑：

我为我的表单找到了一个隐藏字段类型，所以我包括了我的烧瓶表单在服务器上的样子：

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：

我发现您可以像这样在 forms.py 中的 python 中设置表单字段的 ID。（最终，这就是我工作示例的方式）：

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")

Answer 1

这是一个非常简单的示例，说明如何使用 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")

是 jQuery 属性的 id 选择器。要在 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>

flask wtf.quick_form 运行 some javascript 并设置一个表单变量

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

javascript

flask

wtforms