Question

Say I have two types of objects, Apples and Chainsaws. A user is presented with a form and the first field asks them which object they would like to purchase. If they select ApplesI would like one select form field to dynamically appear with options green and red and a label of color. On the other hand, if they select Chainsaws I would like two form fields to dynamically appear, one being a CharField with a label of Your Name and the second being an IntegerField with a label of Your Age (it’s a good idea to keep track of who’s buying your chainsaws).

This, of course, is just an example. The main idea is that I would like to be able to dynamically choose the number and types of fields as well as the data in the fields depending on the user selecting an option from an initial select list…using Django templates. I’ve found plenty of tutorials and questions related to dynamically populating a select list or adding additional fields of a homogeneous type (e.g. additional file upload fields), but I can’t seem to figure out how to dynamically add/change the attributes of my form.

Thanks for any help!
-C

Answer 1

The short answer is that this requires a mixture of CSS, javascript and django forms.

The Form

Step 1 is create a form with conditional validation se my clean method.

from django import forms
from django.utils.translation import ugettext as _
from django.forms.widgets import RadioSelect, Textarea, CheckboxSelectMultiple
from django.utils.safestring import mark_safe

class FormContact(forms.Form):
    """
    The contact form
    """
    choice_a = forms.ChoiceField(
        label=_(u' '),
        choices=(
            (1, mark_safe(_(u'First Option'))),
            (0, mark_safe(_(u'Second Option'))),
        ),
        widget=RadioSelect,
        initial=1
    )
    show_if_choice_1 = forms.CharField(
        label=_(u'Choice 1 text box')
    )
    show_if_choice_2 = forms.CharField(
        label=_(u'Choice 2 text box')
    )

    def clean(self):
        super(forms.Form, self).clean()

        if 'choice_a' in self.cleaned_data :
            if self.cleaned_data['choice_a'] == '1':
                if self.cleaned_data['show_if_choice_1'] == '' :
                    self._errors['show_if_choice_1'] = self.error_class([_(u'Please Fill out choice 1 text box.'),])
            if self.cleaned_data['choice_a'] == '2':
                if self.cleaned_data['show_if_choice_2'] == '' :
                    self._errors['show_if_choice_2'] = self.error_class([_(u'Please fill out choice 2 box'),])

        return self.cleaned_data

The JS and CSS

write some javascript + CSS to show hide fields based on the value of the conditional field.

Note: If you need more direction please just tell me, I didn’t want to spend an eternity typing if you got the jist quickly.