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

Question

我正在创建博客文章，到目前为止已经使用普通的 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，在提交时更新隐藏字段并将更新的隐藏字段发送回服务器。

Edit2：我编写了以下 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 中的 forms.py 中设置表单字段的 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")

是一个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>