Populate textarea field using WTForms

Question

As I understand it, if you want to populate a textarea you place the text between the textarea tags. However I am using WTForms. How can I pre-populate the form from views or in my template?

FORM

class ModuleSectionForm(FlaskForm):
    title = StringField('Section Title', validators=[DataRequired()])
    description = TextAreaField('Description', validators=[DataRequired()])
    submit = SubmitField('Add Section')

VIEW

@modules.route('/update_section/<name>/<title>', methods=['GET', 'POST'])
def update_section(name, title):
    form = ModuleSectionForm()
    module = Module.objects(title=name).first()
    section = None
    for sect in module.sections:
        if sect.title == title:
            section = sect
    #if form.validate_on_submit():
        #save data 
    return render_template('modules/update_section.html', section=section, form=form)

TEMPLATE

<form method="post" action="{{ url_for('modules.update_section', name=name) }}">
    {{ form.hidden_tag() }}
    <div class="form-group">
        {{ form.title.label(class="form-control-label") }}
        {{ form.title(class="form-control", value=section.title) }}
    </div>
    <div class="form-group">
        {{ form.description.label(class="form-control-label") }}
        {{ form.description(class="form-control", default=section.description) }}
    </div>
    <div class="form-group">
        {{ form.submit(class="btn btn-secondary shadow") }}
    </div>
</form>

Did you ever figure this out?

T. Arboreus
– T. Arboreus

2021-09-04 22:45:45 +00:00
Commented Sep 4, 2021 at 22:45 — T. Arboreus
– T. Arboreus, Commented Sep 4, 2021 at 22:45

Jir · Accepted Answer · 2022-01-28 12:50:42Z

1

This can be done by just assigning the text to display beforehand (in the view, for instance).

Try edit your view (update_section) this way:

+ form.description.data = 'text you want to display'

And your template as follows:

- {{ form.description(class="form-control", default=section.description) }}
+ {{ form.description(class="form-control") }}

Mind you, there's an alternative way, which is to specify the placeholder attribute (but I guess is not what you want to do here).

answered Jan 28, 2022 at 12:50

Jir

3,2158 gold badges48 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James_SO · Accepted Answer · 2024-02-28 18:01:46Z

Typically with WTForms (let's assume you're using Flask and Bootstrap here), you'll use the value attribute of the input to pre-populate a form field. Note that pre-populating a field is distinct from providing a 'placeholder', which is just an ephemeral hint. So usually we pre-populate like this:

<div class="form-group row">
 <label for="form_subject" class="col-sm-2 col-form-label">Subject</label>
 <div class="col-sm-7">
  <input class="form-control" id="form_framework" name="form_framework"
value="{{ instruct.Subject }}">
 </div>
</div>

With Flask and Bootstrap, the name attribute is required to pass the value back to the Controller upon submission, the value attribute is used to pre-populate the field from the object - in this case, our controller has passed in an object called instruct, which has an attribute Subject.

But you have to be aware that different kinds of inputs in WTForms have different attributes, and this is left as a fun challenge for the developer to figure out.

For example, in a drop-down, the syntax is like this:

 <option selected="selected">{{ someValue }}</option>

Where we assume that someValue has been passed to the template from the controller.

TextArea doesn't have a value attribute, so in order to pre-populate the field, you do it a bit more like with a drop-down, you have to provide the value between the tags, like so (again, using Bootstrap here in case any of these tags are unfamiliar):

<div class="form-group row">
 <label for="form_longish_text"
class="col-sm-2 col-form-label">Longish Text</label>
 <div class="col-sm-7">
  <textarea class="form-control" rows="3" 
id="form_longish_text"
name="form_longish_text">{{ instruct.LongishText }}
  </textarea>
 </div>
</div>

One thing to remember - <textarea> will respect whatever spaces you might have in your template, so your code should generally put both sides of the tag on one line. (e.g. <textarea>some text</textarea>) This is relevant if it's important that no extra spaces or new lines are added to your value.

Collectives™ on Stack Overflow

Populate textarea field using WTForms

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related