在Python Flask中使用getlist获取多个同名HTML字段的问题

这个问题我之前也碰到过，核心原因很简单：后端框架需要通过特定的name格式来识别同名称的多个输入值，你的input name现在是普通的first，框架只会把它当作单个字段处理，自然只能拿到第一个值。

第一步：修改HTML里的input name为数组格式 #

把原来的name="first"改成name="first[]"，对应的last字段同理改成name="last[]"。修改后的表单代码大概是这样：

<html>
  <div>
    <form method="POST">
      <table id="linkTable">
        <tbody>
          <tr class="tr_clone" id="addrow">
            <td>First: </td>
            <td><input class="from-field" type="text" name="first[]"></td>
            <td>Last: </td>
            <td><input class="to-field" type="text" name="last[]"></td>
          </tr>
        </tbody>
      </table>
    </form>
  </div>
</html>

注意：我去掉了重复的id属性，因为HTML里id必须唯一，动态添加行的时候如果重复用同一个id，会导致JS操作元素时出问题。如果不需要用id定位元素，干脆删掉更省心。

第二步：保证动态添加的行也用相同的name格式 #

你用来克隆行的JS代码里，要确保新生成的input的name也是first[]和last[]，不要变回普通的first/last。比如如果是用jQuery克隆的话，代码大概是这样：

$('#addrow').on('click', function() {
  var newRow = $('.tr_clone').first().clone();
  // 清空新行的输入值
  newRow.find('input').val('');
  // 可以给新行设置唯一的id（如果需要的话）
  newRow.attr('id', 'row-' + Date.now());
  $('#linkTable tbody').append(newRow);
});

这样克隆出来的新行input的name会保持first[]格式，后端就能识别到多个值了。

第三步：后端用getlist取值 #

以Flask为例，现在你可以用下面的代码拿到所有的first和last值：

first_names = request.form.getlist('first[]')
last_names = request.form.getlist('last[]')

如果是Django的话，写法类似：

first_names = request.POST.getlist('first[]')
last_names = request.POST.getlist('last[]')

这样first_names就是一个包含所有动态添加行的first输入值的列表了。

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