如何为formset添加JavaScript事件 解决views.py配置onchange事件报错

错误原因 #

1. 代码中调用的input()是Python内置的标准输入函数，没有attrs关键字参数，所以触发TypeError，你需要使用Django表单库提供的Widget组件（如forms.TextInput）。
2. formset_factory本身不支持widgets参数，该参数仅用于modelform_factory，传入后无法生效。

正确实现方案 #

方案1：在Form类中直接配置Widget #

如果ParteForm是你自定义的Form类，直接在字段定义时指定Widget和事件属性即可：

from django import forms

class ParteForm(forms.Form):
    # 其他字段省略
    name = forms.CharField(
        widget=forms.TextInput(attrs={
            'onchange': 'multiplicar()'
        })
    )

如果是ModelForm，可以在Meta类中配置：

class ParteForm(forms.ModelForm):
    class Meta:
        model = Parte # 替换为你自己的模型类
        fields = ['name'] # 替换为你需要的字段
        widgets = {
            'name': forms.TextInput(attrs={'onchange': 'multiplicar()'})
        }

之后生成formset不需要额外传widget参数：

ParteFormSet = formset_factory(ParteForm, extra=extra_forms, max_num=20)
formset = ParteFormSet()

方案2：生成FormSet实例后批量追加属性 #

如果不想修改原有Form类的定义，可以在生成formset后遍历所有表单，给对应字段追加事件属性：

ParteFormSet = formset_factory(ParteForm, extra=extra_forms, max_num=20)
formset = ParteFormSet()

for form in formset:
    form.fields['name'].widget.attrs.update({
        'onchange': 'multiplicar()'
    })

方案3：前端JavaScript全局绑定（更推荐） #

不需要修改后端Python代码，直接在页面用JS绑定事件，同时适配formset动态新增的表单项：

// 此处可替换为你自己页面中formset的父容器选择器
document.body.addEventListener('change', function(e) {
    // formset生成的输入框name属性格式为`前缀-序号-字段名`，此处匹配所有name字段
    if (e.target.matches('input[name$="-name"]')) {
        multiplicar();
    }
});

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