jQuery提交动态表格表单后Django视图无法获取新增行数据如何解决

问题根因 #

你的代码核心错误出在表单序列化的对象选择上：

• 提交按钮点击事件中的var $form = $(this)里的this指向的是提交按钮本身，不是整个表单元素，调用serialize()只能拿到按钮相关的无效数据，自然取不到动态新增行的输入值。
• 额外注意：带disabled属性的输入框默认不会被序列化提交，如果你需要提交发票号，要把对应input的disabled属性改成readonly。

修改方案 #

1. 修正表单序列化逻辑 #

把提交按钮的点击事件代码修改为如下内容，直接选择id为myForm的表单元素进行序列化：

$(document).ready(function(){
    $("#submitBtn").click(function(){
        // 选择整个表单而不是当前按钮
        var $form = $("#myForm");
        var datastr = $form.serialize();
        $.post(
            '/submit',datastr,function(){
             console.log("done");
            });
    });
});

修改后所有在<form>标签内部的输入（包括你动态新增的行的输入）都会被正常序列化，提交到Django后端。

2. 可选优化：表单命名改成数组形式（更方便后端处理） #

你当前用product1/gst1/cost1、product2/gst2/cost2的命名方式，后端需要遍历计数才能拿到所有行数据，建议改成数组命名：

• 初始行的input name改成product[]、gst[]、cost[]
• 新增行的JS代码里对应的name也改成product[]、gst[]、cost[]，不需要拼接lineNo后缀

后端直接用以下代码就能拿到所有行的对应数据，不用关心新增了多少行：

products = request.POST.getlist('product[]')
gsts = request.POST.getlist('gst[]')
costs = request.POST.getlist('cost[]')
# 按索引配对即可得到每一行的数据
for product, gst, cost in zip(products, gsts, costs):
    # 处理每一行的业务逻辑
    pass

内容的提问来源于stack exchange，提问作者Indrajeet Singh Yadav