烧瓶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，然后设置一个表单变量。在服务器上，我需要检索这个表单变量。有没有人知道如何做到这一点？

作为一个例子，我试过这个：

 < code $ {wtf.form_field（form.submit，button_map = {'submit'：'new_entry_submit_button'}）}} 
 {{wtf.quick_form（form）}} 
  

然后用jquery这样拦截提交按钮：

<$ p $ （）;
x = getSavedAndClickedAsString（）;
（$ {
$（'＃new_entry_submit_button'）。 document.getElementsByName（srcLibArticles）。item（0）.value = x;<！ - libArStr; - >
return true
}）;
}）;

这一切都没有提及，我不能设置一个隐藏字段形成。我不知道如何在页面中设置一个字段。

编辑：

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

  class NewEntry（Form）：
'''
新条目的格式
'''
 title = TextAreaField（Title，validators = [Required（）]）
 text = PageDownField（Text，validators = [ Required（）]）
 tags = TextAreaField（Tags，validators = [Required（）]）
 srcLibEntries = HiddenField（srcLibEntries）
 submit = SubmitField（'Submit'）
  

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

Edit2：
我已经写了下面的html，它几乎可以工作，但仍然有一些bizzare事情发生：

 < form method =postrole =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> 
  

最重要的是，submit按钮的id不会改变。此外，它正在为隐藏输入创建一个标签（设置为表单变量名称）并打印标签。隐藏的输入是在那里，但也是一个恼人的标签，它添加文本到页面。

编辑3：

<我发现你可以在你的forms.py中像这样在python中设置一个表单域的id。 （最终，这是我的例子）：

  class NewEntry（Form）：
'''
新条目的格式
'''
 title = TextAreaField（Title，validators = [Required（）]）
 text = PageDownField（Text，validators = [必需（）]）
 tags = TextAreaField（Tags，validators = [Required（）]）
 srcLibEntries = HiddenField（label = None，id =srcLibArticles）
 submit = （'Submit'，id =new_entry_submit_button）
  

解决方案

这是一个非常简单的例子，如何使用WTForms使用Flask-Bootstrap创建一个表单（因为看起来你是在你的代码中这样做的）：

 < form class =form form-horizo​​ntalmethod =postrole =form> 
 {{form.hidden_​​tag（）}} 
 {{wtf.form_errors（form，hiddens =only）}} 
 
 {{wtf.form_field（form.field1 ）}} 
 {{wtf.form_field（form.field2）}} 
< / form> 
  

以上是手动操作。这里没有想到：

$ $ p $ $ $ c $ {wtf.quick_form（form）}}

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

  $（＃new_entry_submit_button）
  

是一个用于 id 属性的jQuery选择器。在Flask-Bootstrap中设置：

$ p $ {$ wt％

或者：

 < form class =form form-horizo​​ntalmethod =postrole =form> 
 {{form.hidden_​​tag（）}} 
 {{wtf.form_errors（form，hiddens =only）}} 
 {{wtf.form_field（form.field1（id = ）}} 
 {{wtf.form_field（form.field2）}} 
< / form> 
  

I am creating blog posts and have so far done it with a normal html form. One funky think I was doing was running javascript onclick and setting a hidden variable in the form with extra data from the page. This was passed to the server just fine and gotten with request.form. Now I want to use wtf.quick_form for the entering of blog posts. qtf.quick_form works great for simple things, but now I need to run some javascript on click and then set a form variable. At the server, I need to retrieve this form variable. Does anyone know how to do this?

As an example, I tried this :

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

And then used jquery like this to intercept the submit button :

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

None of this is working not to mention, I can't set a "hidden" field in the form. I don't know how to set a field in the form from the page. That's all handled under the hood.

Edit:

I found a Hidden field type for my form so I am including what my flask form looks like at the server :

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

I am trying to write javascript that updates the hidden field upon submit and sends the updated hidden field back to the server.

Edit2: I have written the following html and it almost works but there are still some bizzare things happening :

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

Most noteably, the id of the submit button will not change. Also, it is creating a label for the hidden input (set to the form variable name) and printing the label. The hidden input is there, but so is an annoying label which adds text to the page.

Edit 3:

I found out you can set the id of a form field right in python at your forms.py like this. (Ultimately, this is how I worked my example) :

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

解决方案

Here is a very simple example of how to create a form with Flask-Bootstrap using WTForms (as it appears you are doing this in your code):

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

The above is manually. Here is without thinking:

{{ wtf.quick_form(form) }}

To answer your question, well that is hard to do because you haven't shown us any errors. But one thing is that

$("#new_entry_submit_button")

is a jQuery selector for an id attribute. To set that in Flask-Bootstrap either use:

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

Or:

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

这篇关于烧瓶wtf.quick_form运行一些JavaScript并设置一个表单变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！