WTForms-How to prepopulate a textarea field?

Question

Hi I have been trying to pepopulate a textareafield using something like this in the template.

{{form.content(value="please type content")}}

This works when the field is textfield primarily because the html accepts value for <input type="text"> but the same does not work for textarea... Can someone please help me with this?

Delora

Alice, what is form in this context -- is it a WTForms.Form object or is it something else? – Prescriptible

It is a WTForms.Form object Sean! – Delora

Answer 1

For textarea widgets, you set the default content with the default argument in your field constructors.

class YourForm(Form):
    your_text_area = TextAreaField("TextArea", default="please add content")

Then when you render:

{{form.content()}}

WTForms will render the default text. I have not been able to find a way to specify default text for the text area at render time.

Prescriptible

Thanks Sean! But I need to do it in the template. It is something like an edit blog link.When you click the edit button against any blog, it should present a form with the title in the textfield(which is done using the value parameter) and the content of the blog in the textarea field. – Delora

Hi ,The form defintion, the view function and the html of the form can be viewed here:- pastebin.com/QC4MC84B – Delora

<script> var textarea = document.getElementById('yourIDHere'); textarea.innerHTML = "{{ your_text_variable }}" </script> – Jodi

Answer 2

You can do it before rendering, something like:

form.content.data = 'please type content'

I'm new to WTForms though.

Keratoid

That's what I wanted – Valerianaceous

When I do this any data submitted is not recorded. – Dahomey

@Dahomey and to anyone seeing this later, it's probably because the line is executed both for GET and POST requests. So, when doing a POST request, the data is overwritten with the "default" content you wanted. To fix this, just put the line in a 'if' block like so : if request.method == 'GET': form.content.data = 'please type content' – Antares

Answer 3

I recently had the same problem, I solved it like this:

{% set f = form.content.process_data("please type content") %}
{{ form.content() }}

For a test, you can try run the follow snippet:

>>> import wtforms
>>> import jinja2
>>> from wtforms.fields import TextAreaField
>>> class MyForm(wtforms.Form):
...     content = TextAreaField("Text Area")
... 
>>> t = jinja2.Template("""{% set f = form.content.process_data("please type content") %}
...                     {{ form.content() }}""")
>>> 
>>> t.render(form=MyForm())
u'\n                    <textarea id="content" name="content">please type content</textarea>'

Necrolatry

This does the trick, though there's a teeny problem. I'm not sure if I did anything wrong. Unfortunately process_data() prints a None on the HTML, besides that, it's golden. – Fortyfour

I'm sorry, I didn't read the tags of the post when I wrote the answer. I posted the solution using the Tornado template module, however, I've updated the answer using Jinja2. – Disgorge

This worked better than the above solutions for me because it allows for variable content. – Cliquish

Thank you for this!! I also applied it to my SelectField and it works perfectly! You've saved me hours! – Upholsterer

This worked for me especially because I wanted to assign the value dynamically in the template. – Supervision

Answer 4

For those trying to do this dynamically in jinja template, setting the default value prior to rendering does not fix this problem.

Instead of using the WTForms standard:

{{ form.content() }}

You can construct this element with raw HTML like:

<textarea id="FormName-content" name="FormName-content">{{ dynamic values here }}</textarea>

...and it will still work with your WTForms validation.

Hope this helps someone :)

Place

Upvoting you because this is exactly what I have had to do, but I do think this is a really stupid solution! Why can't WTForms handle TextArea fields in a similar manner to how they handle regular text inputs??? Does no-one ever update text in a TextArea field??? – Bufordbug

Answer 5

Alice there seems to be support built into the form widget to do what you are after but you are right it doesn't work at the moment.

Sean and hilquias post decent work arounds which do work. This is the form (yuk yuk) you might try

 else:
        form.title.data=blog.title
        form.blogdata.data=blog.blogdata
    return render_template('editblog.html',form=form)

Constantino

Answer 6

Define your form with the TextArea field

class MyForm(Form):
    name = fields.StringField('Name', validators=[Required()])
    description = fields.TextAreaField('Description')

Set the textarea content before rending the template

form = MyForm()
form.description.data='this is my textarea content!' # This is the stuff...
return render_template('form.html', form=form, name=name)

Render the fields in your template

<form ...>
    {{ field(form.name, value=name) }}
    {{ field(form.description, rows=2) }}
    <button ...>Save</button>
</form>

Godson

Answer 7

This thread is a bit old but if you need to prepopulate the textarea field with dynamic content, you could use setattr and the default parameter like so:

if post.content:

    form = EditPostForm
    setattr(form, "content", TextAreaField(gettext('Post content'), validators=[Length(max=5000)], default=post.content))
    form = EditPostForm()

else:
    form = EditPostForm()

Don't forget to import TextAreaField.

Liner

This is the best answer! No other solution worked for me. Thanks a lot! – Fusion

This works! Thanks! ( gettext('Post content') is actually not needed ) – Yellowstone

Answer 8

You can also pre-populate a textarea field by passing it in to your WTforms class instantiation in render_template (in this example I'm using the Flask framework):

@admin.route('/edit/<id>', methods=['GET', 'POST'])
def edit(id):
  if request.method == 'POST':
    form = ProspectForm(request.form)
    prospect = Prospect.objects(id=id).first()
    return render_template('admin/edit.html', prospect=prospect, prospect_form=ProspectForm(comments = prospect.comments))

So, comments=prospect.comments says "set the text inside the TextAreaField field named 'comments' to the data contained in prospect.comments"

Voletta

Answer 9

In a Textarea you will need to use innerHTML or html() if you use jquery.

in your context should be:

form.content.innerHTML = "please type content";

//using jquery
$('#element').html("please type content");

Hope it helps.

Orthorhombic

WTForms is a server-side Python library for rendering form HTML -- jQuery will not help in this context unfortunately. – Prescriptible

Thanks for trying to help out though! – Delora