在Django中如何使用JavaScript修改动态表单的字段名称

解决方案 #

方案1：JS动态修改克隆字段的name属性 #

完全可以通过JS修改克隆元素的属性，修改后的代码如下：

$(".add").click(function() {
    // 统计当前页面中name以med开头的输入框数量，作为新字段的序号
    const currentMedCount = $('input[name^="med"]').length;
    // 克隆原始段落元素
    const clonedPara = $("form > p:first-of-type").clone(true);
    // 修改克隆后输入框的name和id属性，避免重复
    clonedPara.find('input').attr({
        'name': 'med' + currentMedCount,
        'id': 'id_medicine' + currentMedCount
    });
    // 插入到表单倒数第一个子元素之前
    clonedPara.insertBefore("form > p:last-child");
    return false;
});

$(".remove").click(function() {
    $(this).parent().remove();
});

后端views.py可以通过循环拼接med+序号的方式，依次读取所有字段的值。

方案2：使用数组形式的name属性（更简便） #

不需要修改JS克隆逻辑，仅需要调整原始输入字段的name属性即可：

• 将原始输入的name属性从med改为med[]，对应代码为：

  <input type="text" name="med[]" maxlength="100" required id="id_medicine">
  

• 后端Django直接调用request.POST.getlist('med[]')，即可获取所有输入框的值，返回结果为按顺序排列的列表，无需手动处理序号。

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