How Do I Render Radio Buttons Individually With WTForms?

Question

I want to have a form with a set of radio buttons, with each radio button controlling enablement of several other controls, and I want the other controls to be interspersed with the radio buttons. In short, I want something like this:

Radio Button
- Check Box
Radio Button
- Select List
Radio Button

where each radio button enables the control immediately below it.

The problem is that Jinja2 wants to render the radio buttons as a group with nothing between them; there doesn't seem to be a clean way to reference the individual button elements.

How do I render the individual radio buttons in the Jinja2 code? I'm using WTForms 2.3.3 and Flask 2.0.1.

For reference, here's the FlaskForm:

def list_sellers():
    c1 = aliased(Contact)
    c2 = aliased(Contact)
    return db.session.query(c2).
        select_from(c1).join(c2, c2.id==c1.seller_id).
        filter(c1.seller_id != None)
    
class ExportForm(FlaskForm):
    filtered = BooleanField('Apply Filters')
    sellers_filter = RadioField(
        'Filter by Seller',
        choices=[
            ('all', 'All Sellers'),
            ('select', 'Select Seller'),
            ('none', 'No Seller')
        ],
        validators=[Optional()]
    )
    seller = QuerySelectField(
        'Seller',
        query_factory=list_sellers,
        allow_blank=False,
        validators=[Optional()],
        render_kw={'class': 'form-select'},
    )
    submit = SubmitField('Download')

score 2 · Accepted Answer · answered Oct 13 '21 at 16:47

2

I got something working, but IMHO it's really ugly:

{% for subfield in form.sellers_filter %}
  {% if subfield.id.endswith('0') %}
    <div class="form-group col-4">
      {{ subfield.label }} {{ subfield }}
    </div>
  {% endif %}
  {% if subfield.id.endswith('1') %}
    <div class="form-group col-4">
      {{ subfield.label }} {{ subfield }}
      {{ form.seller }}
    </div>
  {% endif %}
  {% if subfield.id.endswith('2') %}
    <div class="form.group col-4">
      {{ subfield.label }} {{ subfield }}
    </div>
  {% endif %}
{% endfor %}

answered Oct 13 '21 at 16:47

Darwin von Corax

5,201
3
17
28

I'm gonna steal it anyway, in the absence of anything better. – David White Apr 20 '22 at 04:00
@DavidWhite If somebody finds it useful, then, that's what we're here for! – Darwin von Corax Apr 20 '22 at 16:06

score 0 · Answer 2 · answered May 19 '22 at 19:28

0

You can do it in one line as well to have a code a bit shorter without extra "if" statement

{% for subfield in form.sellers_filter if subfield.id.endswith('0')%}
{{ subfield.label }} {{ subfield }}
{% endfor %}

answered May 19 '22 at 19:28

ser-zhm

83
1
8

score -1 · Answer 3 · answered Oct 06 '21 at 08:53

-1

From my understanding of your question, it's somehow a duplicate here

You need to write javascript code for your purpose.

answered Oct 06 '21 at 08:53

Titotix

55
7

1

I have the javascript working; it's getting Jinja2 to render one button element at a time instead of as a group that I'm having trouble with. I should have clarified that in my question, and have since done so. – Darwin von Corax Oct 06 '21 at 10:42

How Do I Render Radio Buttons Individually With WTForms?

3 Answers3