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

问题

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

回答1:

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>

来源：https://stackoverflow.com/questions/35707246/flask-wtf-quick-form-running-some-javascript-and-setting-a-form-variable

标签

javascript

Flask

wtforms