How to add display dropdown fields in Django

Question

I'm trying to add a category field to my blog posts model in Django. When I make a post with the admin panel it shows the choices in a drop down list, however I wish to display choices in html.

Here is the form in my HTML file:

<div class="container">
    <div class="row">
        <div class="col-lg-7 offset-lg-1">
            <form class="create-form" method="POST" enctype="multipart/form-data">{% csrf_token %}

                <!-- title -->
                <div class="form-group">
                    <label for="id_title">Title</label>
                    <input class="form-control" type="text" name="title" id="id_title" placeholder="Title" required autofocus>
                </div>

                <!-- Body -->
                <div class="form-group">
                    <label for="id_body">Content</label>
                    <textarea class="form-control" rows="10" type="text" name="body" id="id_body" placeholder="Put the description of your post here..." required></textarea>
                </div>

        <div class="form-group">
          <label for="id_category">Category</label>
          <select class="form-control"  name="category" id="id_category" required></select>
        </div>

                <!-- Image -->
                <div class="form-group">
                    <label for="id_image">Image</label>
                    <input  type="file" name="image" id="id_image" accept="image/*" required>
                </div>

you said you are using django so why dont you try widgets from django — Gaurav Kulkarni
– Gaurav Kulkarni, Commented Jul 10, 2020 at 18:06
well you can take help from bootstap for drop down lists, link here --> getbootstrap.com/docs/4.5/components/dropdowns and if you want a list for django then you can use tuples in models as shown here (see the person model for example) docs.djangoproject.com/en/3.0/topics/db/models — Yash Marmat
– Yash Marmat, Commented Jul 10, 2020 at 18:12

Mehmet Kagan Kayaalp · Accepted Answer · 2020-07-10 18:49:38Z

5

I also asked these types of questions about Django in StackOverflow. However, it is really hard to explain your questions as a newbie to experienced people so I will not just answer your question but also I want to show you the path to do it.

I think there are multiple parts to your question. It is not just to create a dropdown list with choices in HTML but also, you want to pass the data from your blog posts model in Django.

Firstly, let's say that the name of the HTML file is posts.html. In posts.html, to create a dropdown in an HTML is like this; (assume that your categories are zero, one and two and you can see these on dropdown list in the admin panel)

<select name="post_categories" class="filter-selectbox">
<option value="zero">"Zero"</option>
<option value="one">"One"</option>
<option value="two">"Two"</option></select>

However, if you want to create a dropdown list using your model's field, you should do similar like this: (I assumed that you can be able to create a dropdown list with your post model's field named category.)

<select name="post_categories" class="filter-selectbox">
{% for post in posts %}
    <option value="{{ post.category }}">{{ post.category }}</option>
{% endfor %} </select>

So now you can pass and use the object to HTML and can be able to use its fields. However, I assumed that you can be able to pass objects to the template. If you do not know how, there is another question that how to pass data to an HTML file? You should search more about "passing objects to template".

In views.py, when you render the template, you can be able to pass parameters or objects to use them in your template. Please look at this for that: Django: Passing object from template to views

So in your case, it should be something like this;

def get_posts(request):
    posts = Post.objects.all() # In this case, I assume that I can reach category as post.category in the template
    context = {"posts": posts}
    return render(request, "posts.html", context)

I hope for a newbie in Django, I could explain it as simple. Keep learning.

Good Luck!

answered Jul 10, 2020 at 18:49

Mehmet Kagan Kayaalp

5652 gold badges11 silver badges21 bronze badges

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

2 Comments

Sohaib El Mediouni Over a year ago

should we also make it in url

Mehmet Kagan Kayaalp Over a year ago

Exactly, for creating views (def get_posts in this case), you also need to add its URL to urls.py. Thanks for the recall.

Collectives™ on Stack Overflow

How to add display dropdown fields in Django

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related