Login

Dynamically add css-classes to formfields

Author:
Lacour
Posted:
July 13, 2011
Language:
Python
Version:
1.3
Tags:
css form class dynamic-form formfield dynamic-css css-class
Score:
0 (after 0 ratings)

This example assumes you have a form and want to highlight one of two fields by setting <class="highlight"> in the html dynamically. This is an alternative to https://docs.djangoproject.com/en/1.3/ref/forms/widgets/#customizing-widget-instances, but now you're not limited to assigning the class to the fields html-output, instead you can also assign it to a div around the field like done here.

After assigning a css-attribute to a field, we access the css via a templatefilter {{ field|css }} that looks up field.form.fields[field.name].css and not simply field.css, since the latter would try to access a non-existing css-attribute on a BoundField-instance

EDIT: The templatefilter is unnecessary. There is a much easier way, since the original field itself is an attribute of the BoundField named 'field'. So in the template, we can access the css via {{ field.field.css }}. Thanks to Tom Evans for pointing me at this.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
# Forms.py:

from django import forms
class MyForm(forms.Form):
    field1 = forms.IntegerField()
    field2 = forms.IntegerField()
    
    def __init__(self, *args, **kwargs):
        highlight_field = kwargs.pop('highlight')    #pass the fieldname-to-highlight as kwarg
        super(MyForm, self).__init__(*args, **kwargs)
        self.fields[highlight_field].css = "highlight"

    # first part done. Now you have the css-attribute attached to your field.


# templatetags\form_manipulation_filters.py:
"""
We need an own template-filter to access the css-attribute. We can't just use
   {{ field.css }} in the template, since {{ field
"""
from django.conf import settings
from django import template

register = template.Library()

@register.filter(name='css')
def css(field):
    try:
        css = field.form.fields[field.name].css
        return css
    except AttributeError:
        return settings.TEMPLATE_STRING_IF_INVALID
css.is_safe = True

# form_snippet.html:
"""
This snippet can be included inside a <form> like:
    <form method="POST" action="">
	{% with form=myform %}
	{% include "form_snippet.html" %}
	{% endwith %}
	<input type="submit" value="Submit"></td>
    </form>
"""
{% load form_manipulation_filters %}
{% csrf_token %}

{{ form.non_field_errors }}

{% for field in form.hidden_fields %}
    <div class="formfield">
        {{ field }}
    </div>
{% endfor %}

{% for field in form.visible_fields %}
    <div class="formfield {{ field|css }}">
        {{ field }}
        {{ field.help_text }}
	{{ field.errors }}   {# errors are after the field #}
    </div>
{% endfor %}

More like this

  1. Class Feeds DRY TemplateTag by gmandx 4 years, 11 months ago
  2. Filter by taggit tags in the admin (Django 1.4) by albertorcf 2 years, 7 months ago
  3. Custom CSS class in Form with template tag filter by kegan 5 years, 10 months ago
  4. Render dynamically assigned fields in a template by rubic 8 years, 1 month ago
  5. tag: render form field by crucialfelix2 5 years, 5 months ago

Comments

Please login first before commenting.