Как установить обработчик событий в поле ввода формы Django
Как установить функцию JavaScript в качестве обработчика в событии onclick в заданном поле формы Django. Возможно ли это?
любая подсказка будет оценена.
7 ответов
Если вы хотите автоматизировать этот процесс, вы можете создать пользовательский виджет для поля. В классе widget вы определяете метод рендеринга таким образом, чтобы он также возвращал код привязки события.
class CustomWidget(forms.TextInput):
class Media:
#js here
js = ('js/my_js.js',)
def render(self, name, value, attrs = None)
output = super(CustomWidget, self).render(name, value, attrs)
#do what you want to do here
output += ...
return output
что я делаю для этого :
class MyForm(forms.Form):
stuff = forms.ChoiceField(
[('a','A'),('b','B')],
widget = forms.Select(attrs = {
'onclick' : "alert('foo !');",
}
)
Я бы рекомендовал использовать библиотеку JavaScript, такие как jQuery. здесь - это ссылка на привязку события click в jQuery. Поскольку Django называет все поля ввода, вы можете подключить my_field_name
в вашей форме Django для события click так:
$("form input[name='my_field_name']").click(function () {
// Handle the click event here
});
С помощью YUI, вы можете сделать это так:
YAHOO.util.Event.addListener(id_myField, "click", myClickEventHandler, myOptionalData);
см. также YUI 2: утилита событий
Я предпочитаю использовать библиотеку JavaScript, так как это сохраняет JS-код на стороне браузера, хорошо отделенный от серверного Django.
Я взял подход JQuery, используя ответ Гислена Левека. Таким образом, я смог вызвать обработчик событий при загрузке страницы.
class MyForm(forms.Form):
stuff = forms.ChoiceField(
[('a','A'),('b','B')],
widget = forms.Select(attrs = {
'widget_to_bind' : "True",
}
)
в моем javascript:
function myFunction() {
var source = $(this); // Widget element
}
$('[widget_to_bind=True]').change(myFunction);
$('[widget_to_bind=True]').trigger("change");
вариации на тему:
class CategoriesForm(forms.Form):
stuff = forms.MultipleChoiceField(
choices=([(pt.id, pt.name) for pt in PaymentType.objects.order_by('name')]),
widget=forms.SelectMultiple(attrs={'size': '20', 'class': 'mc_payment_type'})
)
JQuery:
<script language="javascript">
$('.mc_payment_type').change(function () {
console.log('payment type selected: ' + $(this).find('option:selected').val());
</script>
ответ Ghislain Leveque работает для меня, но в django 1.9 я сделал это так:
class myForm(forms.ModelForm):
class Meta:
model = USER
fields = ["password", "idCity"]
widgets = {
"password": forms.PasswordInput(),
"idCity": forms.Select(attrs={'onchange': "alert('foo !');"})
}