How do I populate dynamically a StringField with the value of a SelectField in Wtforms

Question

in a wtforms, I would like my SelectField to fill up with its selected value a StringField. I use flask, bootstrap, and python 3.7

My HTML code is as follow:

{% block body %}
    <h3>Edit Bloomberg ticker details</h3>
    {% from "includes/forms/_form_helpers.html" import render_field %}


            <div class="form-group" id="company_id" onchange="myFunction(event)">
                {{render_field(form.company_names, class_="form-control")}}
            </div>

            <div class="form-group" id="isin_id">
                {{render_field(form.isin_id, class_="form-control")}}
            </div>

             <script>
                function myFunction(e) {

                    document.getElementById("isin_id").value = e.target.value
                        }
            </script>

{% endblock %}

And the pyhon behind is as follow:


class DefTickerForm(_Form):

    choices_companies = [(1,'Facebook'), (2, 'Google') ]
    company_names = _SelectField(label='Company names:', choices=choices_companies, coerce=int)

    isin_id = _StringField(label='isin_id', validators=[_validators.DataRequired], default=-1)

I would like that when the user select 'Facebook', the isin SelectField to be equal to 1. But so far it does nothing. Note that if if code:

    alert(e.target.value)

I get the wanted value. so issue is to set the TextField value.

my render field code is as followed (from a youtube tutorial):


{% macro render_field(field) %}
    {{ field.label }}
    {{ field(**kwargs)|safe }}
    {% if field.errors %}
        {% for error in field.errors %}
        <span class="help-inline"> {{ error }}</span>
        {% endfor %}
    {% endif %}
{% endmacro %}

Any help would be much apreciated as google isn't so good on these. Best

Je Je Je Je · Accepted Answer · 2019-10-16T22:57:32

apparently TextField only accepts strings (I guess obvious if you are used to javascript)

so code working is as follow in case someone get he same problem:

            <div class="form-group" onchange="myFunction(event)">
                {{render_field(form.company_names, class_="form-control")}}
            </div>

            <div class="form-group">
                {{render_field(form.isin_id, class_="form-control")}}
            </div>

             <script>
                function myFunction(e) {
                                var x = e.target.value;
                                alert(x);
                                document.getElementById("isin_id").value = x.toString();
                        }
            </script>

As a note, Jinja or anyway my render, use the fields names as default IDs (wich i realised using Chrome inpector. Meaning I didn't have to add an id for each Div. Anyway that is the thoughts of a beginenr in Javascripts.

How do I populate dynamically a StringField with the value of a SelectField in Wtforms

1 Answers