javascript - 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
    });
});

这些都不起作用，更不用说，我无法在表单中设置“隐藏”字段。我不知道如何在页面的表单中设置字段。这些都是在幕后处理的。

编辑:

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

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 中的 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>