Jak ustawić procedurę obsługi zdarzeń w polu wprowadzania formularza Django?

Question

Sposób ustawienia funkcji JavaScript jako obsługi w zdarzeniu onclick w danym polu formularza Django. czy to możliwe?

Każda wskazówka byłaby doceniona.

Answer 1

Jeśli szukasz automatyzację tego procesu, można utworzyć widget niestandardową dla tej dziedzinie. W klasie widgetów zdefiniujesz metodę renderowania w taki sposób, że zwróci ona również kod powiązania zdarzenia.

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 

Answer 2

Polecam patrząc na używanie biblioteki JavaScript, takiej jak jQuery. Here to link do wiązania zdarzenia click w jQuery. Ponieważ Django nazwy wszystkich pól wejściowych można podłączyć my_field_name w formularzu Django do zdarzenia click tak:

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

Answer 3

Co zrobić, bo to jest:

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

Answer 4

Korzystanie YUI, można to zrobić tak:

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

Zobacz także YUI 2: Event Utility

Wolę użyciem JavaScript biblioteka, dzięki czemu kod JS po stronie przeglądarki jest dobrze oddzielony od Django po stronie serwera.

Answer 5

Zastosowałem podejście JQuery za pomocą odpowiedzi Ghislaina Leveque'a. W ten sposób mogłem wywołać procedurę obsługi zdarzeń podczas ładowania strony.

class MyForm(forms.Form): 
    stuff = forms.ChoiceField(
     [('a','A'),('b','B')], 
     widget = forms.Select(attrs = { 
      'widget_to_bind' : "True", 
      } 
     ) 

W moim javascript:

function myFunction() { 
    var source = $(this); // Widget element 
} 

$('[widget_to_bind=True]').change(myFunction); 
$('[widget_to_bind=True]').trigger("change"); 

Answer 6

wariacja na temat:

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> 

Answer 7

Ghislain Leveque odpowiedź działa na mnie, ale w Django 1.9 Zrobiłem to tak:

class myForm(forms.ModelForm): 
    class Meta: 
     model = USER 
     fields = ["password", "idCity"] 
     widgets = { 
      "password": forms.PasswordInput(), 
      "idCity": forms.Select(attrs={'onchange': "alert('foo !');"}) 
     }