Question

157

Show and hide dynamically fields in Django form

rated 0 times [ 158] [ 1] / answers: 1 / hits: 16103 / 11 Years ago, thu, february 28, 2013, 12:00:00

I have a form in Django:

views.py:

class SearchForm(forms.Form):

    type = forms.ChoiceField(choices = ...)

    list1 = forms.ModelMultipleChoiceField(...)

    list2 = forms.ModelMultipleChoiceField(...)

home.htm:

<td valign='top'>{{ form.type }}</td>

<td valign='top'>{{ form.list1 }}</td>

<td valign='top'>{{ form.list2 }}</td>

<td valign='top'><input type=submit value=Find /></td>

I want the list1 element to be shown and the list2 to be hide if type is 1 and vice versa in case type is 2. I want them to be hide and shown dynamically without reloading the page or any interaction with the server.

I believe Javascript could be useful here, but I don't know it.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mahogany

Add To Favorites

Follow

Total Points: 645

Total Questions: 107

Total Answers: 98

Location: Israel

Member since Wed, Apr 14, 2021

3 Years ago

answered 11 Years ago marcos · Accepted Answer

Try this...

<script>function Hide()

{

    if(document.getElementById('mainselect').options[document.getElementById('mainselect').selectedIndex].value == 1)

    {

         document.getElementById('a').style.display = 'none';

         document.getElementById('b').style.display = '';

    }else

    {

         document.getElementById('a').style.display = '';

         document.getElementById('b').style.display = 'none'

    }

}

</script>

<td valign='top'><select id=mainselect onchange=Hide()><option value=1>1</option><option value=2>2</option></select></td>

<td valign='top' id='a'>{{ form.list1 }}</td>

<td valign='top' id='b'>{{ form.list2 }}</td>

<td valign='top'><input type=submit value=Find /></td>