How to make a checkbox checked in Jinja2

Question

I am learning flask programming and cannot figure out how to make a radio input checked, here is the html template I am using:

<form method = "POST" action="/proxy_settings">
    <input type="radio" name="proxy_mode" value = '0'>Auto
    <br>
    <input type="radio" name="proxy_mode" value = '1'>Manual
    <br>
    <br>
    <section>
        <table border="1">
            <tr>
                <td>Description</td>
                <td>delay</td>
                <td>select</td>
            </tr>
            {% for node_name, node_delay in node_list.items() %}
            <tr>
                <td>{{node_name}}</td>
                <td>{{node_delay}}</td>
                <td><input type="radio" name="proxy_node"></td>
            </tr>
            {% endfor %}
        </table>
    </section>
    <br>
    <section>
        <button type="submit">CONFIRM</button>
    </section>
</form>

I am rendering this template in flask like this:

return render_template("base.html", node_number = ret["node_number"], proxy_mode = ret1["proxy_mode"], proxy_node = ret2["proxy_node"], node_list=ret3)

My question is:

How to make proxy_mode radio input checked according to the value of variable proxy_mode?
How to make proxy_node radio input checked according to the value of variable proxy_node? For example, if proxy_node equals to 2, then the radio input in row 2 of the table will be checked.
How to assign a value attribute dynamically to the radio input proxy_node?

I have tried the following method for question 1 but it doesn’t work.

<input type="radio" name="proxy_mode" value = '0' {% if proxy_mode == 0 %} checked=true {% endif %}>Auto
<br>
<input type="radio" name="proxy_mode" value = '1' {% if proxy_mode == 1 %} checked=true {% endif %}>Manual

Thanks in advance!

Asked By: Edmond

||

Source

Answer 1

After reading through Jinja2 Template Designer Documentation and another stackoverflow question I was able to come up with a solution for my problems:
Use Jinja statements to control whole html tag instead of a property of this tag. So, the form looks like this after modification:

        <form method = "POST" action="/proxy_settings">
            {% if proxy_mode == '0' %}
            <input type="radio" name="proxy_mode" value = '0' checked=true>Auto
            {% else %}
            <input type="radio" name="proxy_mode" value = '0'>Auto
            {% endif %}
            <br>
            {% if proxy_mode == '1' %}
            <input type="radio" name="proxy_mode" value = '1' checked=true>Manual
            {% else %}
            <input type="radio" name="proxy_mode" value = '1'>Manual
            {% endif %}
            <br>
            <br>
            <section>
                <table border="1">
                    <tr>
                        <td>Description</td>
                        <td>delay</td>
                        <td>select</td>
                    </tr>
                    {% for node_name, node_delay in node_list.items() %}
                    <tr>
                        <td>{{node_name}}</td>
                        <td>{{node_delay}}</td>
                        {% if loop.index0 == proxy_node|int %}
                        <td><input type="radio" name="proxy_node" value={{loop.index0}} checked=true></td>
                        {% else %}
                        <td><input type="radio" name="proxy_node" value={{loop.index0}}></td>
                        {% endif %}
                    </tr>
                    {% endfor %}
                </table>
            </section>
            <br>
            <section>
                <button type="submit">CONFIRM</button>
            </section>
        </form>

Hope this answer will help whoever viewed this question. Thanks!

Answered By: Edmond

Answer 2

This should be the easiest way.

<input type="radio" name="proxy_mode" value="0" {{ "checked" if proxy_mode == 0 }}>Auto
<br>
<input type="radio" name="proxy_mode" value="1" {{ "checked" if proxy_mode == 1 }}>Manual

Answered By: northtree

Answer 3

<input type="radio" name="proxy_mode" value="0" {% if proxy_mode == 0 %}checked{% endif %}>Auto

<input type="radio" name="proxy_mode" value="1" {% if proxy_mode == 1 %}checked{% endif %}>Manual

Answered By: ivan argemiro rios rios

How to make a checkbox checked in Jinja2

Question:

Answers: