如何在Javascript中提取Django formset的id及对应元素值

问题原因 #

1. 语法使用错误：你在调用document.getElementById()时，给变量名formset_quantity、formset_unit_price加了单引号，相当于你要查找id为固定字符串formset_quantity的元素，而非变量中存储的动态生成的id值，这是最直接的报错原因。
2. Django formset索引逻辑错误：Django formset的id_form-TOTAL_FORMS字段存储的是当前表单的总数量，表单索引从0开始计数，比如你页面里只有1个表单时，TOTAL_FORMS的值为1，对应有效的表单索引是0。如果你直接用TOTAL_FORMS的值作为索引拼接id，得到的是下一个待新增的表单id，这个元素此时还不存在，自然匹配不到。
3. DOM加载时机问题：如果你的JS代码在页面DOM渲染完成前就执行，也会出现找不到已存在元素的情况。

修正方案 #

1. 修正语法错误+索引逻辑 #

修改calculate.js的对应代码即可：

// 取总表单数后减1，得到最后一个已存在的表单的索引
// 如果你的场景是新增表单后取值，要确保先把新表单插入DOM再执行取值逻辑
var form_idx = parseInt(document.getElementById('id_form-TOTAL_FORMS').value) - 1;
console.log("当前表单索引:" + form_idx);

// 动态生成id
var formset_quantity='id_form-'+form_idx+'-quantity';
var formset_unit_price='id_form-'+form_idx+'-unit_price';
var formset_total_price_id='id_form-'+form_idx+'-total_price';

// 取值时直接传入变量，不要加引号
var id_formset_quantity=document.getElementById(formset_quantity).value;
var id_formset_unit_price=document.getElementById(formset_unit_price).value;
var formset_total_price=document.getElementById(formset_total_price_id);

补充：如果你是新增表单后需要取新表单的值，要确保先完成新表单的DOM插入操作，再执行取值逻辑，此时新表单的索引就是修改前的TOTAL_FORMS值，不需要减1。

2. 确保DOM加载完成再执行JS #

可以把JS代码放到</body>标签之前，或者用DOM加载完成事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  // 把你的业务代码放到这里面
});

内容的提问来源于stack exchange，提问作者Itzel Bracho Molina