使用jQuery通过ID获取Django表单字段值时遇未定义问题

可能的原因 #

1. ID构造逻辑错误：你默认把Django inline formset的前缀当成className + s（比如card_language→card_languages），但Django默认的inline formset前缀是模型名小写+_set（比如模型CardLanguage对应的前缀是cardlanguage_set），实际生成的TOTAL_FORMS字段ID是id_cardlanguage_set-TOTAL_FORMS，和你构造的ID不匹配，自然找不到元素返回undefined。
2. data-type属性值不匹配：可能按钮的data-type值和实际formset前缀不一致，比如你以为是card_language，但实际应该是cardlanguage或者cardlanguage_set。
3. 未验证className实际值：没确认className的输出是否正确，可能拿到空字符串或错误值，导致构造的ID无效。

解决步骤 #

1. 确认实际DOM中的ID #

打开浏览器开发者工具（F12），找到TOTAL_FORMS对应的input元素，查看它的id属性到底是什么。比如实际生成的可能是：

<input type="hidden" name="cardlanguage_set-TOTAL_FORMS" id="id_cardlanguage_set-TOTAL_FORMS" value="2">

对比你构造的ID是否一致。

2. 调试className的值 #

在代码里加一行打印，确认拿到的data-type是否正确：

const className = $(this).data('type');
console.log('className:', className); // 查看控制台输出是否符合预期

如果输出不对，检查按钮的data-type属性有没有写错，比如是不是data-type="cardlanguage_set"而非card_language。

3. 修正ID构造逻辑 #

根据实际的formset前缀调整：

• 如果前缀是cardlanguage_set，且data-type是cardlanguage，构造方式改为：

  const form_idx = $(`#id_${className}_set-TOTAL_FORMS`).val();
  

• 如果是你自定义了前缀为card_languages（在views创建formset时指定prefix='card_languages'），原代码逻辑没问题，但要确认data-type值是card_language。

4. 更可靠的获取方式（推荐） #

不用硬拼ID，通过name属性查找，Django生成的input的name是<prefix>-TOTAL_FORMS，直接根据name查找更不容易出错：

const form_idx = $(`input[name="${className}_set-TOTAL_FORMS"]`).val();
// 如果前缀是xxxs格式，就用：
// const form_idx = $(`input[name="${className}s-TOTAL_FORMS"]`).val();

5. 动态元素兼容（如果适用） #

如果formset是AJAX动态加载的，即使脚本在DOM加载后执行，绑定事件时元素可能还不存在，改用事件委托：

$(document).on('click', '#addMore, .addMoreInlineItems', function(e) {
    e.preventDefault();
    const className = $(this).data('type');
    const form_idx = $(`#id_${className}_set-TOTAL_FORMS`).val();
    // ...后续逻辑
});

内容的提问来源于stack exchange，提问作者Malo Henry Winrhy