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

【问题标题】：How to set an event handler in a Django form input field如何在 Django 表单输入字段中设置事件处理程序
【发布时间】：2010-12-14 05:54:48
【问题描述】：

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

任何线索将不胜感激。

【问题讨论】：

标签： javascript django django-forms

【解决方案1】：

我会推荐使用 jQuery 等 JavaScript 库。 Here 是在 jQuery 中绑定点击事件的链接。由于 Django 为所有输入字段命名，您可以将 Django 表单中的 my_field_name 连接到 click 事件，如下所示：

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

【讨论】：

我真的不明白与 Django 有什么关系
很公平。这里与 Django 的唯一关系是 Django 如何根据声明性表单中使用的名称来命名输入字段以使绑定正确。总的来说，这不是一个真正的 Django 问题。这是一个JS问题。
这是一个关于如何添加 JS 事件的 Django 问题，这里的这个人回答得很好：stackoverflow.com/a/1879919/2516892

【解决方案2】：

如果您正在寻找自动化此过程，您可以为该字段创建一个自定义小部件。在小部件类中，您将定义一个渲染方法，它也将返回事件绑定代码。

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

【讨论】：

【解决方案3】：

我为此做的是：

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

【讨论】：

【解决方案4】：

使用YUI，您可以这样做：

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

另见YUI 2: Event Utility

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

【讨论】：

【解决方案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");

【讨论】：

【解决方案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>

【讨论】：

【解决方案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 !');"})
        }

【讨论】：