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

Question

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

wgwz · Accepted Answer · 2016-03-01T17:52:23.137

4

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>

edited Mar 01 '16 at 17:52

answered Feb 29 '16 at 19:18

wgwz

2,116
18
29

Thanks! This looks very very close to what I need. The only thing I can't figure out is how to set a hidden field with a specific id, which I would then populate with the javascript and send it back to the server upon submit. You have some lines about "hidden" there, but I don't understand them. A little more detail would be helpful :) – user442920 Mar 01 '16 at 14:56
[I found this] (http://stackoverflow.com/questions/13619558/wtforms-hidden-field-value) – user442920 Mar 01 '16 at 15:02
I'm still confused. I copied in your code and it doesn't render any input boxes. Am I right in assuming that "form" in the code you have refers to the form that I submit from the server upon rendering the template? And form.field1 refers to the form field I wrote in my flask form? – user442920 Mar 01 '16 at 15:10
This code : {{ wtf.form_field(form.submit, button_map={'id':'new_entry_submit_button'}) }}, doesn't change the id of the submit button. – user442920 Mar 01 '16 at 15:44
1

Keep in mind that `wtf.form_field` is really just a styling function. So for clarity maybe it is best to remove that for now. Apologies that my solution did not work the first time. See the last code block for the proper solution. `form.field1(id='whatever')` – wgwz Mar 01 '16 at 18:14
1

This one should get you the rest of the way there for adding a value to the hidden field. http://stackoverflow.com/questions/2979772/set-value-of-hidden-field-in-a-form-using-jquerys-val-doesnt-work – wgwz Mar 01 '16 at 20:17

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

1 Answers1

Linked