Как установить обработчик событий в поле ввода формы Django

Как установить функцию JavaScript в качестве обработчика в событии onclick в заданном поле формы Django. Возможно ли это?

любая подсказка будет оценена.

7
django django-forms javascript

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
2

что я делаю для этого :

class MyForm(forms.Form):
    stuff = forms.ChoiceField(
        [('a','A'),('b','B')],
        widget = forms.Select(attrs = {
            'onclick' : "alert('foo !');",
            }
        )
11

Я бы рекомендовал использовать библиотеку JavaScript, такие как jQuery. здесь - это ссылка на привязку события click в jQuery. Поскольку Django называет все поля ввода, вы можете подключить my_field_name в вашей форме Django для события click так:

$("form input[name='my_field_name']").click(function () { 
    // Handle the click event here
});
4

С помощью YUI, вы можете сделать это так:

YAHOO.util.Event.addListener(id_myField, "click", myClickEventHandler, myOptionalData);

см. также YUI 2: утилита событий

Я предпочитаю использовать библиотеку JavaScript, так как это сохраняет JS-код на стороне браузера, хорошо отделенный от серверного Django.

1

Я взял подход 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");
0

вариации на тему:

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>
0

ответ 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 !');"})
        }
0