CODEWITHSUNDEEP
htmldjango
jas
jas

Reputation: 57

Combining radio-button with a dropdown form

How can I combine radio-button inside a dropdown select form. I'll be grateful for your help.

My codes: index.html

<div class="card-header">
                <div class="container">
                  <div class="row">
                      <form class="col-md-4">
                          <select class="form-control select2" >
                            <option>Select Major Head</option>
                            {% for major in majors %}
                              <option>{{ major.pk }}: {{ major.description }}</option> 
                            {% endfor %} 
                          </select>
                          <button type="button">Display!</button>
                      </form>
                   </div>
                </div>
              </div>

Upvotes: 1

Views: 723

Answers (1)

crimsonpython24
crimsonpython24

Reputation: 2383

This might not be the best approach, but you can try something like this:

<form class="col-md-4" action="{{ your_url_here }}" method="post">
  {% csrf_token %}
  <select class="form-control select2" >
    <option>Select Major Head</option>
    {% for major in majors %}
      <option value="{{ major.pk }}">{{ major.pk }}: {{ major.description }}</option> 
    {% endfor %} 
  </select>
  <input type="submit" value="Select">
</form>

Yes, you need to write a Django form to process the data. You can read more about forms here. The value="{{ major.pk }}" part gives Django views an attribute to recognize, which you are going to use later.

After having filled out the form, you can get the data in your views as such:

def page_objects(request):
  if request.method == 'POST':
    form = YourForm(request.POST)

    if form.is_valid():
      answer = form.cleaned_data['value']

Forms are not the easiest thing to do as you need to create your own views and forms, both backend and frontend. You may also try out other form helper libraries like django crispy forms, but that really depends on how much you want to rely on bootstrap and other UI libraries.

Upvotes: 1

Related Questions