CODEWITHSUNDEEP
htmldjangotwitter-bootstrappostdrop-down-menu
Austin A
Austin A

Reputation: 3138

Send selection from bootstrap dropdown button with Django

I'm trying to send the the selected option from dropdown button (Bootstrap) through a post request with Django. I've been able to find a solution using javascript but I would like to find a solution that cuts out the javascript.

One possible way to do this is seen in Max L's question. However, this drops the styling gained from bootstrap and adds another button to send the request. What I would like is to be able to send the request when a user clicks on an option in the dropdown menu.

Another approach is I could place links as the dropdown options and use them to redirect to a different page, but I would really prefer to use a post request.

My attempt at this has mainly followed the bootstrap example code for drop down buttons with the addition of a form tag around the button. How could I get this to work?

<div style="float:right">
  {% if forloop.last %}
  <!-- Single button -->
  <div align="right" class="btn-group">
    <form method="POST" action="confirmaction">
      <button type="submit" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Intended Action <span class="caret"></span>
      </button>
      <ul name="aid" class="dropdown-menu">
        {% for aid, name in actions %}
        <!--from context dict, use keyname = aid to grab value-->
        <li value="{{ aid }}"><a{{ name }}</li>
        {% endfor%}
      </ul>
    </form>
  </div>

Let me know if you need any other information from me and thanks!

Upvotes: 1

Views: 2580

Answers (1)

kmmbvnr
kmmbvnr

Reputation: 6139

The only way to make a POST without JavaScript, is to click on a form button. Check this codepen - http://codepen.io/anon/pen/qdPJYw

<ul class="dropdown-menu">
    <li>
        <form method="POST">
            <button type="submit" class="btn" name="option1" >
               POST ACTION 1
            </button>
        </form>
    </li>
</ul>

In addition you need to some css to make button appears the same as dropdown link.

Upvotes: 2

Related Questions