Flask+html: Why am I getting empty list from the checkbox values?

Issue

I am using a for loop to printout all the data from datastore into the html form. I am also storing the keys in checkbox value to retain it later when the checkboxes are checked. However, when I try to fectch these values on click of compare button at the buttom, I am getting an empty list. I am unsure if I am taking the right approach. Can anyone help me out?
Html code:

{% for car in cars %}
<div class="row">
            <div class="column">
                <div class="card">
                   <ul>
                        <input type="checkbox" name="car_keys_checkbox" value="{{ car.key.name }}">
                        <li>Car Name: {{ car.ev_name }}</li>
                        <li>Manufacturer: {{ car.ev_manufacturer }}</li>
                        <li>Year:{{ car.ev_year }}</li>
                    </ul>
                        <form action="/car_details/{{ car.key.name }}" method="post" class="filter_form">
                        <input type="submit" name="show_details" class="button-1" value="Details"/>
                    </form>

                    </ul>
                </div>
            </div>
        </div>
    {% endfor %}
 <form action="/compare" method="post" class="filter_form">
    <input type="submit" name="cmpDetails_cars" id="cmp_btn" value="Compare"/>
</form>

Python part:

def compare_cars():
    id_token = request.cookies.get("token")
    error_message = None
    claims = None
    result=None
    if id_token:
        try:
            claims = google.oauth2.id_token.verify_firebase_token(id_token, firebase_req_adapter)
        except ValueError as exc:
            error_message = str(exc)
    ev_key = request.form.getlist('car_keys_checkbox')
    print(ev_key)
    return redirect(url_for('list_ev'))

Solution

Your checkbox are outside the form, should be something like this:

<form action="/compare" method="post" class="filter_form">
  {% for car in cars %}
    <div class="row">
      <div class="column">
        <div class="card">
          <ul>
            <input type="checkbox" name="car_keys_checkbox" value="{{ car.key.name }}">
            <li>Car Name: {{ car.ev_name }}</li>
            <li>Manufacturer: {{ car.ev_manufacturer }}</li>
            <li>Year:{{ car.ev_year }}</li>
          </ul>
            <form action="/car_details/{{ car.key.name }}" method="post" class="filter_form">
              <input type="submit" name="show_details" class="button-1" value="Details"/>
            </form>

          </ul>
        </div>
      </div>
    </div>
  {% endfor %}

  <input type="submit" name="cmpDetails_cars" id="cmp_btn" value="Compare"/>
</form>

Answered By - Link Strifer