skip to Main Content

I cannot get the values (eventually in a list) from a checkbox created in a for loop in HTML (Flask FW). The problem is in the html code (i checked the .py file)

Note: those are the relevant parts from my code

Edit: there are 2 forms in the second for-loop and nesting forms in not something i desire

HTML file

<table>
{# tr with th #}
{% for book in books %}
    <tr>
        {% for item in book %}
            <td>
                <form method="POST" action="/submitform">
                    <input type="checkbox" id="book_{{ book[0] }}" name="book" value="{{ book }}" >
                </form>
            <form method="POST" action="/bookEdit">
                                <button type="submit" name="id" value="{{ book[0] }}">Edit</button>
                            </form>
            {# and another form here #}
            </td>
        {% endfor %}
    </tr
{% endfor %}
<form method="POST" action="/submitform">
    <button type="submit" name="book">Done</button>
</form>
</table>

.py file:

book_list = request.form.getlist('book')
print(book_list)  # displays ['']  (from the last <form>, i think)

2

Answers


  1. You just keep redefining your form over and over again in the loop. Don’t do that. Move the form tags to encompass all of the logic.

    <form method="POST" action="/submitform">
        {% for book in books %}
            <tr>
                {% for item in book %}
                    <td>
                        <input type="checkbox" id="book_{{ book[0] }}" name="book" value="{{ book }}" >
                    </td>
                {% endfor %}
            </tr
        {% endfor %}
        <button type="submit" name="book">Done</button>
    </form>
    

    I already know this won’t work on its own because we’re missing the full <table> structure in there, which you never gave, but the principle is roughly what you should be trying to aim for. If you don’t want the button itself in the form (I’m guessing that’s next) then look at Submit form using a button outside the tag

    Login or Signup to reply.
  2. There are two problems with your HTML:

    1. Only elements with a name attribute contained within the <form> element are actually submitted. Since your submit button is surrounded by its own <form> element, the only thing getting sent through the form was the submit button itself. Try using only a single <form> tag to surround your <input> and <button> tags. (NOTE: There is a way around this by using the form attribute, but I don’t recommend you use it here)

    2. Your submit button does not need a name attribute to work, and actually conflicts with the name attribute of your <input> checkboxes.

    Here is the corrected HTML:

    <form method="POST" action="/submitform">
        {% for book in books %}
            <tr>
                {% for item in book %}
                    <td>
                        <input type="checkbox" id="book_{{ book[0] }}" name="book" value="{{ book }}" >
                    </td>
                {% endfor %}
            </tr>
        {% endfor %}
        <button type="submit">Done</button>
    </form>
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search