Django中如何在TextInput的onchange事件中获取输入值？

问题分析 #

你在Django表单中给TextInput组件绑定onchange事件时，能正常获取ID但无法拿到输入值，核心原因可能有两个：

1. onchange事件的触发时机：文本输入框的onchange仅在输入框失去焦点且内容发生变化时才会触发，若你在输入过程中直接测试，可能还未触发事件；
2. 参数传递或函数接收的问题：虽然this.value是获取输入框值的正确方式，但可能函数定义时未正确处理参数。

解决方法 #

方法1：确保函数正确接收参数

先检查你的JavaScript函数定义是否正确接收id和value参数，示例如下：

function calculate_price_of_product(elementId, value) {
    // 先通过控制台确认参数是否正确
    console.log("ID:", elementId);
    console.log("输入值:", value);
    // 后续业务逻辑
}

方法2：改用oninput事件实时获取值

若你需要在用户输入过程中实时获取值，推荐用oninput代替onchange，它会在内容变化时立即触发：

bdc_quantity_1 = forms.CharField(
    widget=forms.widgets.TextInput(
        attrs={'oninput':'calculate_price_of_product(this.id,this.value)'}
    )
)

方法3：直接传递元素本身（更可靠）

避免参数传递可能出现的问题，直接把当前元素传递给函数，再从元素中获取ID和值：

bdc_quantity_1 = forms.CharField(
    widget=forms.widgets.TextInput(
        attrs={'onchange':'calculate_price_of_product(this)'}
    )
)

对应的JavaScript函数：

function calculate_price_of_product(element) {
    const elementId = element.id;
    const inputValue = element.value;
    console.log("ID:", elementId);
    console.log("输入值:", inputValue);
    // 业务逻辑处理
}

额外检查

确认Django渲染后的HTML输出是否正确，生成的input标签应类似如下格式：

<input type="text" id="id_bdc_quantity_1" onchange="calculate_price_of_product(this.id,this.value)" name="bdc_quantity_1">

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