Flask无页面重载提交表格内嵌表单仅获取首行数据问题求解

问题根因 #

• HTML规范要求ID属性全局唯一，你在循环渲染每一行表单时，所有表单和内部input元素都使用了重复ID，使用ID选择器$("#xxx")取值时，浏览器只会返回页面中第一个匹配该ID的元素，因此无论提交哪一行，获取的都是第一行的数据。
• 未引入AJAX逻辑时功能正常，是因为原生表单提交会自动提交当前触发提交的表单内所有输入值，不依赖ID选择器取值，因此不会出现该问题。

修复方案 #

不需要额外加索引配置，只需修改JavaScript逻辑，基于当前触发提交的表单作为上下文查找内部输入元素即可，无需依赖全局ID选择器。

步骤1：可选择删除冗余的重复ID #

你可以保留HTML部分代码不变，也可以删除表单和input上重复的id属性避免HTML校验报错。

步骤2：修改JavaScript代码 #

将原JS逻辑替换为如下内容：

$(document).on('submit', '#reassign-form', function(e) {
    e.preventDefault();
    // 取当前触发提交的表单实例
    const currForm = $(this);
    $.ajax({
        type: 'POST',
        url: '/',
        // 直接序列化当前表单的所有输入值，无需逐个取值
        data: currForm.serialize(),
        success: function() {
            alert('Reassignment Submitted.');
        }
    });
});

如果需要手动逐个取值，写法如下：

data:{
    mhh_key: currForm.find('input[name="mhh_key"]').val(),
    mhh_name: currForm.find('input[name="mhh_name"]').val(),
    curr_initial: currForm.find('input[name="curr_initial"]').val(),
    reassigned_initial: currForm.find('input[name="reassigned_initial"]').val()
}

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