Cómo configurar un controlador de eventos en un campo de entrada de formulario de Django

Question

Cómo establecer una función de JavaScript como controlador en el evento onclick en un campo dado de un formulario de Django. es posible?

Cualquier pista sería apreciada.

Answer 1

Si usted está buscando para la automatización de este proceso, se puede crear un widget personalizado para el campo. En la clase de widget, definirá un método de renderizado de tal forma que también devolverá el código de enlace de evento.

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

Recomendaría utilizar una biblioteca JavaScript como jQuery. Here es el enlace para enlazar el evento click en jQuery. Dado que los nombres de Django todos los campos de entrada que se puede conectar my_field_name en su formulario de Django para el evento click de este modo:

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

Answer 3

lo que hago para que sea:

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

Answer 4

Usando YUI, puede hacer lo que de esta manera:

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

Véase también YUI 2: Event Utility

Yo prefiero usar un JavaScript biblioteca, ya que esto mantiene el código JS del navegador bien separado del servidor Django.

Answer 5

Tomé el enfoque JQuery usando la respuesta de Ghislain Leveque. De esta forma, pude activar el controlador de eventos en la carga de la página.

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

En mi javascript:

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

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

Answer 6

variación sobre un tema:

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

La respuesta Ghislain Leveque trabaja para mí, pero en Django 1.9 Lo hice así:

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