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.

Answer 1

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.