Question

如何在Django Form的给定字段中单击事件中将JavaScript函数设置为处理程序。这可能吗？

任何线索都会受到赞赏。

Answer 1

我为此做的是：

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

Answer 2

我建议使用jQuery这样的JavaScript库。 Here是在jQuery中绑定click事件的链接。由于Django为所有输入字段命名，因此您可以将Django表单中的my_field_name连接到click事件，如下所示：

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

Answer 3

如果您正在寻找自动执行此过程，则可以为该字段创建自定义窗口小部件。在窗口小部件类中，您将以这样的方式定义呈现方法，即它还将返回事件绑定代码。

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 4

使用YUI，你可以这样做：

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

另见YUI 2: Event Utility

我更喜欢使用JavaScript库，因为这样可以将浏览器端的JS代码与服务器端Django完全分开。

Answer 5

我使用Ghislain Leveque的答案采用了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");

Answer 6

主题的变化：

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的回答对我有用，但在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 !');"})
        }

如何在Django表单输入字段中设置事件处理程序

7 个答案: