SelectField option to dynamically populate default value in TextAreaField using WTForms

Question

I have a SelectField that is populated from a database table. I load the choices into the form as follows:

@statuses.route('/new', methods=['GET', 'POST'])
@login_required
def new_status():
    form = StatusForm()
    form.status_cd.choices = [(a.id, a.status_cd) for a in \
                               Status_Code.query.order_by('status_cd')]
    if form.validate_on_submit():
        status = Status(author=current_user)
        form.to_model(status)
        db.session.add(status)
        db.session.commit()
        flash('The status was added successfully.')
        return redirect(url_for('.index'))
    return render_template('statuses/new_status.html', form=form)

The model referenced in the query is as follows:

class Status_Code(db.Model):
    __tablename__ = 'status_cd'
    id = db.Column(db.Integer, primary_key=True)
    status_cd = db.Column(db.String(16), nullable=False)
    status_detail = db.Column(db.Text)
    is_option_active = db.Boolean()
    date_created = db.Column(db.DateTime, default=db.func.now())

And the form class is as follows:

class StatusForm(Form):
    datetime = DateTimeField('Date / Time')
    name = StringField('Name', validators=[Required()])
    status_cd = SelectField('Status Code', coerce=int)
    status_detail = TextAreaField('Status Detail', default="Default text",\
                                validators=[Required()])
    submit = SubmitField('Submit')

The Question

Depending on the option selected in the SelectField, I want it to dynamically set the status_detail TextAreaField's default text. The value from the SelectField should query the database and return the status_detail, which should be the default text.

For example, if I have:

id   status_cd     status_detail
1    Apple         The apples are red.
2    Banana        The bananas are yellow.

If the user selects the "Apple" option, the default text should be "The apples are red."

Any assistance would be greatly appreciated! I am building my first Flask app so I'm new to this.

So you want to change the text area field based on the selected option from the drop down? Also, you want to query this each time something is selected? — CodeLikeBeaker

CodeLikeBeaker CodeLikeBeaker · Accepted Answer · 2014-08-25T16:08:07

In my experience with flask, you can do this a couple of ways. There is no right way, and it is all up to you:

You can load the status_detail data, and place it in a data-detail tag in your select option value:

<select name='status_cd' onchange="get_status(this);">
    {% for s in status %}
        <option value='{{ s.id }}' data-detail='{{ s.status_detail }}'>{{ s.status_cd }} </option>
    {% endfor %}
</select>

Then you can do an onchange with JavaScript, which can then get the data-detail value and update your text box (this is pseudo code, not meant for copy and paste):

<script>
    function onchange(o){
      var value = $(o).attr('data-detail');
      //do something with the value
   }
</script>

OR

You can do it where it pulls from the database dynamically if you don't wan to put the data-detail tag in your code, like this:

Same onchange with JavaScript, but can then do a call to an Ajax call to your routed method to return your value (this is pseudo code, not meant for copy and paste):

<script>
    function onchange(o){
      var value = $(o).value();
    $.ajax({
      url: '/my_rout',
      data: value,
      success : function(data){
        //handle your result here
      }
   })
   }
</script>

I hope this at least gets you in the right direction with some different options to choose from.

SelectField option to dynamically populate default value in TextAreaField using WTForms

1 Answers