CODEWITHSUNDEEP
pythonhtmldjangodjango-templates
RDX
RDX

Reputation: 155

How to pass values of drop down from html template to views in Django?

I need to send the value of the selected option in a drop down to the views.

Html code of template is as follows:

<select name="version" id="version" onchange="location = this.value;">
    <option>Select version to compare with</option>
    {%for ver in version_list%}
        <option value={{ver}} href="{% url 'process_data' ver %}">{{ver}}</option>
    {% endfor %}
</select>

Above html code is giving me the following error:

Page not found (404)
Request Method: GET
Request URL:    http://127.0.0.1:8000/index/11.5.1.18900-96

http://127.0.0.1:8000/index/11.5.1.18900-97


Using the URLconf defined in Piechart_Excel.urls, Django tried these URL patterns, in this order:
admin/
index/
process_data/<str:ver> [name='process_data']

The current path, index/11.5.1.18900-96, didn't match any of these.

However, if I am sending the value as follows i.e. without any drop down:

<a href="{% url 'process_data' ver1 %}">{{ver}}</a>

everything is working as expected.

Urls.py file content is as follows:

from django.urls import path
from fusioncharts import views

urlpatterns = [
    path('index/', views.index, name='index'),
    path('process_data/<str:ver>', views.process_data, name='process_data'),
]

Can anyone tell why is it not working in the case of drop down but working otherwise? If we have to send any value from the html template using drop down, then how to do so?

Thanks.

Upvotes: 1

Views: 2557

Answers (1)

Nicholas_Jones
Nicholas_Jones

Reputation: 320

Your using a link inside an option tag, which I argue there are better ways however ... you can try this.

<select name="version" id="version" onchange="location = this.value;">
      <option>Select version to compare with</option>
      {%for ver in version_list%}
      **<option value="{% url 'process_data' ver %}">{{ver}}</option>**
      {% endfor %}
  </select>

You also might have to edit the onchange event

onChange="window.location.href=this.value"

If that doesn't work then you could convert to links and then convert it into a dropdown menu using css or a css framework.

<ul>
    <li><a href="{% url 'process_data' ver %}">{{ver}}</a></li>
<ul>

Complete Dropdown example

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Select version to compare with
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    {%for ver in version_list%}
      <a class="dropdown-item" href="{% url 'process_data' ver %}">{{ver}}</a>
    {% endfor %}
  </div>
</div>

This is assuming you import bootstrap see the following links for details: https://getbootstrap.com/docs/4.0/getting-started/introduction/ https://getbootstrap.com/docs/4.0/components/dropdowns/

Upvotes: 1

Related Questions