Toggle language of labels in flask wtforms form

Question

I have a series of wtforms written in a flask app. One of my pages in my app will be used by people speaking English and Spanish. I would like to find a clean way of toggling the form element labels between English and Spanish with a toggle button on the webpage.

I found a nice solution to toggle languages using the HTML lang attribute here (2nd answer down, by J Grover):

Using Javascript to change website language

This encloses each language in a <span> element and then simply hides the one we don't want to see.

My problem is that the labels for the fields on my forms are coming from wtforms objects. I am unsure how to include multiple languages in my current setup. See below for an example of where I am now:

Form

class RoofCheck(FlaskForm):                                                                                                                                                                                              
    """                                                                                                                                                                                                                      
    Class holding the form inputs for a roof check                                                                                                                                                                                       
    """                                                                                                                                                                                                                      
    roofstate = RadioField('Roof Status',                                                                                                                                                                               
                           validators=[validators.DataRequired('Please select roof closed or open')],                                                                                                                        
                           choices=[('closed', 'Closed'), ('open', 'Open')])                                                                                                                                                 
    comments = TextAreaField('Comments on roof status',                                                                                                                                                                    
                             [validators.optional(), validators.length(max=390)],                                                                                                                                          
                             render_kw={"placeholder": "Enter comments here",                                                                                                                                              
                                        "rows": 4,                                                                                                                                                                         
                                        "style": "min-width: 100%"})                                                                                                                                                       
    submit = SubmitField('Submit')

HTML

<div id='roof_check' class='col-md-6 padding-0'>                                                                                                                                                                        
    <form id="roof_check_form" action={{ url_for('roof_check')}} method="post" name="roof">                                                                                                                                   
        <fieldset class='form_group'>                                                                                                                                                                                    
            {{ form1.hidden_tag() }}                                                                                                                                                                                     
            <legend class='text-center'>                                                                                                                                                                                 
                Daily visual check of the roof                                                                                                                                                          
            </legend>                                                                                                                                                                                                    
            {% for subfield in form1.roofstate %}                                                                                                                                                                        
                <div class='form-check'>                                                                                                                                                                                 
                    {{ subfield }} &nbsp;                                                                                                                                                                                
                    {{ subfield.label(class_="form-check-label") }} <br/>                                                                                                                                                
                </div>                                                                                                                                                                                                   
            {% endfor %}                                                                                                                                                                                                 
            <div class='form-check'>                                                                                                                                                                                     
                {{ form1.comments }}                                                                                                                                                                                   
            </div>                                                                                                                                                                                                       
            <div class='form-check'>                                                                                                                                                                                     
                {% with messages = get_flashed_messages(category_filter=["form1"]) %}                                                                                                                                    
                    {% if messages %}                                                                                                                                                                                    
                        {% for message in messages %}                                                                                                                                                                    
                            <div> {{ message }} </div>                                                                                                                                                                   
                        {% endfor %}                                                                                                                                                                                     
                    {% endif %}                                                                                                                                                                                          
                {% endwith %}                                                                                                                                                                                            
                {% for message in form1.roofstate.errors %}                                                                                                                                                              
                    <div> {{ message }} </div>                                                                                                                                                                           
                {% endfor %}                                                                                                                                                                                             
                <div style="padding-top: 5px;">                                                                                                                                                                          
                    {{ form1.submit(class_="btn btn-primary") }}                                                                                                                                                        
                </div>                                                                                                                                                                                                   
            </div>                                                                                                                                                                                                       
        </fieldset>                                                                                                                                                                                                      
    </form>                                                                                                                                                                                                              
</div>

I am not sure where to begin adding multiple labels to the RoofCheck class form objects. Any advice on how to insert support for two languages here would be great. Thanks in advance.

score 0 · Accepted Answer · answered Apr 25 '17 at 09:56

So it turns out that I can just add html directly to the label and place the language attribute there, then use the javascript solution in the link above to toggle the language. For example:

roof_status_text = ("<span lang='en'>Roof Status</span>"
                    "<span lang='es'>Estado del Techo</span>")
open_text = ("<span lang='en'>Open</span>"
             "<span lang='es'>Abierto</span>")
closed_text = ("<span lang='en'>Closed</span>"
               "<span lang='es'>Cerrado</span>")
roofstate = RadioField(roof_status_text,
                       validators=[validators.DataRequired('Please select roof closed or open')],                                                                                                                        
                       choices=[('closed', closed_text),
                                ('open', open_text)])

Toggle language of labels in flask wtforms form

1 Answers1