Flask模板循环中发送Post请求时传错元素ID的问题

问题根源 #

你所有的表单都使用了相同的ID is_admin，而document.getElementById()只会返回DOM中第一个匹配该ID的元素。所以不管点击哪一行的复选框，最终提交的都是循环生成的第一个表单的数据，导致后端收到固定的某个ID。

解决方案1：给每个表单设置唯一ID #

修改模板代码，让每个表单的ID包含循环元素的唯一标识data.id，同时更新提交事件的目标ID：

{% for data in profile %}
<tr>
  <td>{{data.id}}</td>
  <td>{{data.email}}</td>
  <td>{{data.full_name}}</td>
  <td>{{data.given_name}}</td>
  <td>{{data.created_at | format_datetime('full')}}</td>
  <td>
    <form method="post" id="is_admin_{{data.id}}">
      <input hidden name="profile_id" value="{{data.id}}" />
      <input type="checkbox" name="toogle_off" id="{{data.id}}"
        onchange="document.getElementById('is_admin_{{data.id}}').submit()" {{
        "checked" if data.is_admin == True }} /> {{data.is_admin}}
    </form>
  </td>
</tr>
{% endfor %}

解决方案2：直接通过表单关联提交（更简洁） #

不需要依赖ID，利用DOM元素的层级关系，通过this.form直接获取当前复选框所在的表单并提交，避免ID冲突问题：

{% for data in profile %}
<tr>
  <td>{{data.id}}</td>
  <td>{{data.email}}</td>
  <td>{{data.full_name}}</td>
  <td>{{data.given_name}}</td>
  <td>{{data.created_at | format_datetime('full')}}</td>
  <td>
    <form method="post">
      <input hidden name="profile_id" value="{{data.id}}" />
      <input type="checkbox" name="toogle_off" id="{{data.id}}"
        onchange="this.form.submit()" {{
        "checked" if data.is_admin == True }} /> {{data.is_admin}}
    </form>
  </td>
</tr>
{% endfor %}

这种方式更可靠，也省去了维护唯一ID的麻烦。

内容的提问来源于stack exchange，提问作者Isaac