Using Select2 with flask-wtforms

Question

After select2 manipulates the dropdown field the regular use of form.owner_id.data yields None. How can I extract the selected option from a select2 field.

If I disable the select2 javascript, wtforms will work just fine and I will be able to use form.owner_id.data. (but it looks ugly)

screenshot of rendered form

forms.py

class ProjectForm(FlaskForm):
    owner_id = SelectField('Owner:', [validators.Required()], choices=[], render_kw={"placeholder": "Owner company *"})

(rest of form has been truncated for simplicity)

views.py

@app.route('/new_project/<int:company_id>', methods=('GET', 'POST'))
def new_project(company_id):
    membership = Membership.query.filter_by(user_id=current_user.id, company_id=company_id).first()
    company = Company.query.filter_by(id=company_id).first_or_404() 
    form = ProjectForm()

    form.owner_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]

    form.client_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]

    form.contractor_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]

    form.membership_id.choices = [(str(comp.id), repr(comp)) for comp in Company.query.all()]

    if request.method == 'POST':
        flash(str(form.owner_id.data), 'success')

    if form.validate_on_submit():
        project = Project()
        connection = Assignment()

        # PROJECT DETAILS
        project.title = form.title.data
        project.description = form.description.data
        project.owner_id = int(form.owner_id.data)

_macro

{% macro render_select_field(field, placeholder='Select...', label='Select an option below') %}
<div class="form-group">
    <label>{{ label }}</label>
    <select data-placeholder="{{ placeholder }}" class="select-size-xs">
        <option></option>
          {% for choice in field.choices %}
              <option value="{{ choice[0] }}">{{ choice[1] }}</option>
            {% endfor %}
    </select>
    {% if field.errors %}
    {% for error in field.errors %}
      <span class="help-block text-danger"><i class="icon-cancel-circle2 position-left"></i>{{ error }}</span>
    {% endfor %}
  {% endif %}
</div>
{% endmacro %}

html

<form method="POST" action="{{ url_for('new_project', company_id=company.id) }}" enctype="multipart/form-data" role="form">
            <div class="panel panel-body login-form">
                <div class="text-center">
                    <div class="icon-object text-muted"><i class="icon-plus2"></i></div>
                </div>

                {{ form.hidden_tag() }}
                <div class="text-center form-group"><span>Project details</span></div>
                {{ new_render_field(form.title, icon="icon-quill2", class_='form-control') }}

                {{ new_render_field(form.description, icon="icon-stack-text", class_='form-control', rows=10) }}

                {{ render_select_field(form.owner_id, placeholder="Who's doing the work?", label="Select the owner company") }}

                {{ render_select_field(form.client_id, placeholder="Where do the bills go?", label="Select the client company") }}

                {{ new_render_field(form.default_client_rate, icon="icon-price-tag", class_='form-control') }}

                {{ new_render_field(form.default_contractor_rate, icon="icon-price-tag", class_='form-control') }}


                <!-- THE REST OF FORM HAS BEEN TRUNCATED FOR SIMPLICITY -->
                <div class="form-group">
                  <button type="submit" class="btn bg-pink-400 btn-block">Create</button>
                </div>
            </div>
        </form>

Donohoe

After Select2 manipulates the DOM, your original <option>s are still there, buried under all the new code. Perhaps you can add some JS to your submit button that will mark the old option with selected="selected" – Moskow

I attempted: var selected = $('#select2-1mme-container').text() $('option:contains(selected)').setAttribute('selected', 'selected');. But the option:contains(selected) was returning no results. Any other ideas? – Donohoe

Answer 1

So after analyzing the select field in the inspect window, it became apparent that the select field is missing the name="{{ field.name }}" that wtforms requires in order to validate the form. The simple change made in my _macro was from this:

<select data-placeholder="{{ placeholder }}" class="select-size-xs">

To this:

<select data-placeholder="{{ placeholder }}" class="select-size-xs" name="{{ field.name }}">

With this addition wtforms can now validate, and find the selected option returning the proper id for form.owner_id.data.

Donohoe