title: Using Twitter Bootstrap radio buttons with Flask
body: <p>I am building a web-based dashboard, and I would like to use radio-buttons from <a href="http://en.wikipedia.org/wiki/Twitter_Bootstrap" rel="noreferrer">Twitter Bootstrap</a> to help create queries that are then run against <a href="http://en.wikipedia.org/wiki/MongoDB" rel="noreferrer">MongoDB</a> (via <a href="http://en.wikipedia.org/wiki/Flask_%28programming%29" rel="noreferrer">Flask</a>), which then refreshes the <em>same</em> page with newly populated data. I am new at building web-based dashboards, so please let me know if there are better ways of doing this.</p>
  
  <pre><code>{% extends "base.html" %}
  
  {% block content %}
  &lt;div class="row"&gt;
      &lt;div class="span4 offset4"&gt;
          &lt;div class="well"&gt;
              &lt;legend&gt;Click me!&lt;/legend&gt;
              &lt;form method="POST" action="" accept-charset="UTF-8"&gt;
                  {% if error %}
                      &lt;div class="alert alert-error"&gt;
                          &lt;a class="close" data-dismiss="alert" href="#"&gt;x&lt;/a&gt;{{ error }}
                      &lt;/div&gt;
                  {% endif %}
  
                  &lt;div id="radios1" class="btn-group view-opt-btn-group" data-toggle="buttons-radio"&gt;
                      &lt;button type="button" class="btn active" name="choice1" value="A"&gt;A&lt;/button&gt;
                      &lt;button type="button" class="btn" name="choice1" value="B"&gt;B&lt;/button&gt;
                      &lt;button type="button" class="btn" name="choice1" value="C"&gt;C&lt;/button&gt;
                      &lt;button type="button" class="btn" name="choice1" value="D"&gt;D&lt;/button&gt;
                      &lt;button type="button" class="btn" name="choice1" value="E"&gt;E&lt;/button&gt;
                      &lt;input type="hidden" name="choice1" value={{request.form['choice1']}} /&gt;
                  &lt;/div&gt;
  
                  &lt;script type="text/jscript"&gt;
                      $("body").find("#radios1").children().each(function () {
                          $(this).bind('click', function () {
                              $("input[name=choice1]").val(this.value);
                              });
                      });
                  &lt;/script&gt;
  
                  &lt;button class="btn-info btn" input type="submit"&gt;Submit&lt;/button&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  {% endblock %}
  </code></pre>
  
  <p>This generates the radio-buttons and uses JavaScript code to detect which button was clicked, which then sends that data back through the <code>request.Form</code> object for processing.</p>
  
  <p>How do I set the active box on each of the button-bars after the screen is updated? Do I have to write some sort of <code>{{if request.option1 == ?}}</code> block to then define the <code>class="btn active"</code> for each button, or is there a more clever (or obvious) way of doing this? Also, how do I set the defaults/initialization conditions? Should I pre-populate the corresponding fields in the request object?</p>
  
  <p>Also, is it possible to pass the selected boxes to Flask without using the JavaScript code from above?</p>