how to create dropdown menu in django

Question

I'm new to django and would like to create a drop down menu for options. I'm confused as to what I should include in my forms.py and how to call that form on my index.html.

My forms.py

    from django import forms

    class MyModel2(forms.Form):
       class Meta:
           model = MyModel
           fields = ['color']

My index.html

    <form method="POST" action = "">{% csrf_token %}

            <p>Choose color</p> {{ form.color}}
            <br><br>
            <input type="submit" value="Submit!"/>

        </form>

My models.py

    from __future__ import unicode_literals

    from django.db import models

    COLOR_CHOICES = (
       ('green','GREEN'),
       ('blue', 'BLUE'),
       ('red','RED'),
       ('orange','ORANGE'),
       ('black','BLACK'),
    )

    class MyModel(models.Model):
        color = models.CharField(max_length=6, choices=COLOR_CHOICES, default='green')

Thank you!

and please include your views?

binpy
– binpy

2017-12-12 21:48:33 +00:00
Commented Dec 12, 2017 at 21:48 — binpy
– binpy, Commented Dec 12, 2017 at 21:48

MCBama · Accepted Answer · 2017-12-12 22:07:52Z

2

So your only problem is that you declared your model field as a CharField while trying to use a forms.Form for your form instead of a forms.ModelForm. If you're going to use forms.Form you'll need to declare a ChoiceField to get a select dropdown automatically.

You could also make use of forms.ModelForm instead of forms.Form in your form and I'm pretty sure that would make it work as well. ModelForm and Forms don't handle fields the same way unfortunately.

edited Dec 12, 2017 at 22:07

answered Dec 12, 2017 at 21:47

MCBama

1,50010 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

schrodingerscatcuriosity Over a year ago

ChoiceField is a form field, not a model field.

MCBama Over a year ago

@guillermochamorro He's using a forms.Form not a forms.ModelForm so yes, he would need to use a ChoiceField in his form. I've royally confused myself when typing so editing to make things better xD

user7859002 · Accepted Answer · 2017-12-12 22:15:57Z

Widgets are probably the answer here, but you don't necessarily need to use a ModelForm (unless, as it seems like, you are wanting to use models with you form, but you don't have to.) Try something like this:

# forms.py
class MyModel2(forms.Form):
   color = forms.CharField(widget=forms.Select)

and...

<!-- index.html -->
<form method="POST" action = "ACTION_OR_VIEW_URL_ON_SUBMIT_HERE">{% csrf_token %}
    <label for="colorSelect">Choose color</label>
    <select type="text" id="colorSelect" name="colorSelect">
        <option selected>GREEN</option>
        <option>BLUE</option>
        <option>RED</option>
        <option>ORANGE</option>
        <option>BLACK</option>
    </select>
    <br><br>
    <input type="submit" value="Submit!"/>
</form>

Or, if you do want to use a ModelForm, check out guillermo chamorro's answer to see how to use widgets with them.

schrodingerscatcuriosity · Accepted Answer · 2017-12-12 22:27:30Z

-1

First use ModelForm instead of Form, then you can use widgets attributes:

from django.forms import ModelForm

# Mind the name of your form!!

class MyModelForm(ModelForm):
   class Meta:
       model = MyModel
       fields = ['color']
       widgets = {
           # Here you define what input type should the field have
           'color': Select(attrs = { 
               'class': 'form-control',
           }),
       }

You don't "call that form on my index.html". Yo use views to call the form and set the html template to use.

Using class based views you got:

from django.views.generic import CreateView
from .models import MyModel
from .forms import MyModelForm

class ColourCreateView(CreateView):
    model = MyModel
    template_name = 'index.html'
    form_class = MyModelForm

edited Dec 12, 2017 at 22:27

answered Dec 12, 2017 at 21:51

schrodingerscatcuriosity

1,8701 gold badge20 silver badges32 bronze badges

2 Comments

Varun Sharma Over a year ago

what 'class' : 'form-control' does

schrodingerscatcuriosity Over a year ago

@VarunSharma this is an old answer and I haven't been using django for a long time, but to answer your question it's the html attributes of the widget, so something like <select class="form-control"..., but I can't say if this kind of code is still possible in modern versions of django.

Collectives™ on Stack Overflow

how to create dropdown menu in django

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related