Django - получение значения textinput формы по событию onchange

Я использую это для получения ID и значения элемента select в форме в django с помощью события onchange:

class forms_bdc(forms.ModelForm):
[...]
    bdc_description_1 = forms.ModelChoiceField( widget=forms.Select(attrs={'id': 'editable-select-2','onchange': 'populate_selected_product(this.id,this.value)'}),empty_label=None )

Я пытаюсь сделать то же самое с виджетом TextInput. Идентификатор возвращается, как и ожидалось, но я не знаю, как получить значение :

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

Я также пробовал использовать this.text вместо this.value, но безуспешно.

Спасибо

Поведение события иногда бывает специфическим, особенно в случае onchange, поскольку существует условие гонки между браузером и вашим кодом в попытке разрешить значение.

Первый подход заключается в использовании Timeout перед вызовом calculate_price_of_product. Задержка может быть равна 0, но функция будет вызвана после события. Например:

attrs={'onchange': 'let input=this; setTimeout(function() {populate_selected_product(input.id,input.value)},0);}'}

Это обычная практика, вы можете поискать здесь, на SO по "is setTimeout(fn, 0) useful?"

Другой способ в Django сделать то, что вы хотите, это использовать сырое событие change в js:

class BdcForm(forms.Form):

    class Media:
        js = ('bdcs/js/onchange.js',)
    
    ...
    bdc_quantity_1 = forms.CharField()  # I dont use any widget

а onchange.js выглядит так: 

window.addEventListener('load', function () {
    document.getElementById('id_bdc_description_1').addEventListener('change', function() {
        console.log('You selected: ', this.id, this.value);
    });
})

Я назвал это лучшим способом, потому что в Django часто используется событие window.onload, а в django-admin есть много js.скриптов "в коробке", работающих на window.onload.

Вернуться на верх