如何将Django formset表单变量传递给JavaScript函数

原有代码报错、功能失效来自三个问题：

• 直接在onclick参数位写{{ form.form_id_test }}时，模板渲染出的是整个表单字段的input控件HTML代码，不是字段存储的ID值，直接传入JS会直接触发语法错误。
• 就算你拿到了ID值，如果是字符串类型，没有给参数包裹引号，浏览器会把ID值识别为未定义的JS变量，同样报语法错误。
• 循环内所有按钮都使用了相同的id="delete-form"，违反HTML全局id唯一的规范，会导致后续DOM操作异常。

方案1：修正内联事件写法（改动最小） #

直接调整模板代码，取字段实际值、给参数加引号、修正重复id问题即可：

{% for form in formset %}
{{ form.form_id_test }}
<button 
  id="delete-btn-{{ form.form_id_test.value }}" 
  type="button" 
  class="btn btn-primary mb-2" 
  onclick="deleteFormFunc('{{ form.form_id_test.value }}')"
>
  Delete Form
</button>
{% endfor %}

注意：{{ form.form_id_test }}是Django表单字段的完整控件渲染语法，要取字段存储的原始值必须加.value后缀，否则会把整段input标签传入函数。

方案2：数据属性+事件绑定（推荐，更易维护） #

不建议在HTML里写内联JS，你可以把表单ID存在按钮的自定义数据属性上，再通过JS统一绑定事件，后续逻辑调整不需要改模板代码：
模板部分：

{% for form in formset %}
{{ form.form_id_test }}
<button 
  type="button" 
  class="btn btn-primary mb-2 delete-form-btn" 
  data-form-id="{{ form.form_id_test.value }}"
>
  Delete Form
</button>
{% endfor %}

JS部分：

// 绑定所有删除按钮的点击事件，如果你的formset支持动态新增表单，建议把事件绑定在formset的外层容器上做事件委托
document.querySelectorAll('.delete-form-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    const targetFormId = this.dataset.formId;
    deleteFormFunc(targetFormId);
  })
})

// 自定义的表单删除逻辑
function deleteFormFunc(formId) {
  // 这里写你的删除逻辑，比如移除对应表单DOM、标记删除状态等
  console.log('待删除表单ID：', formId);
}

如果你的form_id_test本身是隐藏字段，渲染后会自动生成带值的hidden input，你也可以通过DOM相对查找的方式拿到ID值，但用data-*自定义属性存值的方式逻辑更清晰，不会因为DOM结构调整失效。

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