title: Django and Bootstrap: Knowing Which Tab is Active
body: <p>General web development newbie here. My background is Java but I've been playing around a lot with Django + Bootstrap websites lately.</p>
  
  <p>I'm currently working on a fun little project but ran into an issue regarding how I want the tabs in Bootstrap to work.</p>
  
  <p>The context here is that a user can log a workout they have done using these Django generated forms. The days of the week are tabs across the top of the page.</p>
  
  <p><strong>How can I know which tab is active on the server side, so that I can properly submit the workout into the right spot in the database?</strong></p>
  
  <p>The obvious solution is just to make 7 different forms, but there has to be a better solution that I am too much of a newbie to see.</p>
  
  <p>Here is my html body: </p>
  
  <pre><code>    &lt;body&gt;
      &lt;div class ="container-fluid"&gt;
          &lt;div class = "span8 offset4"&gt;
              &lt;ul id="myTab" class="nav nav-tabs"&gt;
                &lt;li class="active"&gt;&lt;a href="#Mon" data-toggle="tab"&gt;&lt;h3&gt;Mon&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#Tues" data-toggle="tab"&gt;&lt;h3&gt;Tues&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#Wed" data-toggle="tab"&gt;&lt;h3&gt;Wed&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#Thu" data-toggle="tab"&gt;&lt;h3&gt;Thu&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#Fri" data-toggle="tab"&gt;&lt;h3&gt;Fri&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#Sat" data-toggle="tab"&gt;&lt;h3&gt;Sat&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="#Sun" data-toggle="tab"&gt;&lt;h3&gt;Sun&lt;/h3&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="tab-content"&gt;
                &lt;div class="tab-pane fade in active " id="Mon"&gt;
                  &lt;div class="accordion" id="accordion2"&gt;  
                   &lt;div class="accordion-group"&gt;  
                      &lt;div class="accordion-heading"&gt;  
                        &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWarmup"&gt;  
                        &lt;h2&gt;Warmup&lt;/h2&gt; &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div id="collapseWarmup" class="accordion-body collapse" style="height: 0px; "&gt;  
                          &lt;div class="accordion-inner"&gt;  
                            &lt;table class="table"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Name&lt;/th&gt;
                                      &lt;th&gt;Sets&lt;/th&gt;
                                      &lt;th&gt;Reps&lt;/th&gt;
                                      &lt;th&gt;Distance&lt;/th&gt;
                                      &lt;th&gt;Intensity&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  {% for exercise in mon.warmup.all %}
                                      &lt;tr&gt;
                                          &lt;td&gt;{{ exercise.name }} &lt;/td&gt;
                                          {% if exercise.sets %}
                                              &lt;td&gt;{{ exercise.sets }} &lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                          {% if exercise.reps %}
                                              &lt;td&gt;{{ exercise.reps }} &lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                          {% if exercise.distance %}
                                              &lt;td&gt;{{ exercise.distance }}m &lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                          {% if exercise.intensity %}
                                              &lt;td&gt;{{ exercise.intensity }}&lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                      &lt;/tr&gt;
                                  {% endfor %}
                              &lt;/tbody&gt;
                              &lt;/table&gt;
                                  &lt;form name="warmupform" class="well form-inline" action="{% url editworkout %}" method="post" enctype="multipart/form-data"&gt;
                                      {% csrf_token %}
                                      &lt;p&gt;{{ warmupform.as_p }}
                                      &lt;/p&gt;
                                      &lt;p&gt;&lt;button type="submit" name="warmupsubmit" class="btn btn-primary"&gt;Submit Workout&lt;/button&gt;&lt;/p&gt;
                                  &lt;/form&gt;
                            &lt;/div&gt; &lt;!-- accordian inner --&gt;
                          &lt;/div&gt;  &lt;!-- collapseone --&gt;
                      &lt;/div&gt;  &lt;!-- accordian group --&gt;
                   &lt;div class="accordion-group"&gt;  
                      &lt;div class="accordion-heading"&gt;  
                        &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWorkout"&gt;  
                        &lt;h2&gt;Workout&lt;/h2&gt; &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div id="collapseWorkout" class="accordion-body collapse" style="height: 0px; "&gt;  
                          &lt;div class="accordion-inner"&gt;  
                            &lt;table class="table"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Name&lt;/th&gt;
                                      &lt;th&gt;Sets&lt;/th&gt;
                                      &lt;th&gt;Reps&lt;/th&gt;
                                      &lt;th&gt;Distance&lt;/th&gt;
                                      &lt;th&gt;Intensity&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  {% for exercise in mon.intervalworkout.all %}
                                      &lt;tr&gt;
                                          &lt;td&gt;{{ exercise.name }} &lt;/td&gt;
                                          {% if exercise.sets %}
                                              &lt;td&gt;{{ exercise.sets }} &lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                          {% if exercise.reps %}
                                              &lt;td&gt;{{ exercise.reps }} &lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                          {% if exercise.distance %}
                                              &lt;td&gt;{{ exercise.distance }}m &lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                          {% if exercise.intensity %}
                                              &lt;td&gt;{{ exercise.intensity }}&lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                      &lt;/tr&gt;
                                  {% endfor %}
                              &lt;/tbody&gt;
                              &lt;/table&gt;
                                  &lt;form name="intervalform" class="well form-inline" action="{% url editworkout %}" method="post" enctype="multipart/form-data"&gt;
                                      {% csrf_token %}
                                      &lt;p&gt;{{ intervalform.as_p }}
                                      &lt;/p&gt;
                                      &lt;p&gt;&lt;button type="submit" name="intervalsubmit" class="btn btn-primary"&gt;Submit Workout&lt;/button&gt;&lt;/p&gt;
                                  &lt;/form&gt;
                            &lt;/div&gt; &lt;!-- accordian inner --&gt;
                          &lt;/div&gt;  &lt;!-- collapseone --&gt;
                      &lt;/div&gt;  &lt;!-- accordian group --&gt;
                   &lt;div class="accordion-group"&gt;  
                      &lt;div class="accordion-heading"&gt;  
                        &lt;a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseWeights"&gt;  
                        &lt;h2&gt;Strength Training&lt;/h2&gt; &lt;/a&gt;
                      &lt;/div&gt;
                      &lt;div id="collapseWeights" class="accordion-body collapse" style="height: 0px; "&gt;  
                          &lt;div class="accordion-inner"&gt;  
                            &lt;table class="table"&gt;
                              &lt;thead&gt;
                                  &lt;tr&gt;
                                      &lt;th&gt;Name&lt;/th&gt;
                                      &lt;th&gt;Sets&lt;/th&gt;
                                      &lt;th&gt;Reps&lt;/th&gt;
                                      &lt;th&gt;Intensity&lt;/th&gt;
                                  &lt;/tr&gt;
                              &lt;/thead&gt;
                              &lt;tbody&gt;
                                  {% for exercise in mon.strengthtraining.all %}
                                      &lt;tr&gt;
                                          &lt;td&gt;{{ exercise.name }} &lt;/td&gt;
                                          {% if exercise.sets %}
                                              &lt;td&gt;{{ exercise.sets }} &lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                          {% if exercise.reps %}
                                              &lt;td&gt;{{ exercise.reps }} &lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                          {% if exercise.intensity %}
                                              &lt;td&gt;{{ exercise.intensity }}&lt;/td&gt;
                                          {% else %}
                                              &lt;td&gt; &lt;/td&gt;
                                          {% endif %}
                                      &lt;/tr&gt;
                                  {% endfor %}
                              &lt;/tbody&gt;
                              &lt;/table&gt;
                                  &lt;form name="strengthtrainingform" class="well form-inline" action="{% url editworkout %}" method="post" enctype="multipart/form-data"&gt;
                                      {% csrf_token %}
                                      &lt;p&gt;{{ strengthform.as_p }}
                                      &lt;/p&gt;
                                      &lt;p&gt;&lt;button type="submit" name="strengthtrainingsubmit" class="btn btn-primary"&gt;Submit Workout&lt;/button&gt;&lt;/p&gt;
                                  &lt;/form&gt;
                            &lt;/div&gt; &lt;!-- accordian inner --&gt;
                          &lt;/div&gt;  &lt;!-- collapseone --&gt;
                      &lt;/div&gt;  &lt;!-- accordian group --&gt;
                  &lt;/div&gt;  &lt;!-- accordian 2 --&gt;
              &lt;/div&gt;&lt;!-- tabpane --&gt;
                        &lt;div class="tab-pane fade in " id="Tues"&gt;PROFILE ... Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, &lt;/div&gt;
                        &lt;div class="tab-pane fade in " id="Wed"&gt;MESSAGES ... Aliquip placeat salvia cillum iphone. &lt;/div&gt;
                        &lt;div class="tab-pane fade in " id="Thu"&gt;SETTING ... Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.&lt;/div&gt;
                        &lt;div class="tab-pane fade in " id="Fri"&gt;PROFILE ... Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, &lt;/div&gt;
                        &lt;div class="tab-pane fade in " id="Sat"&gt;MESSAGES ... Aliquip placeat salvia cillum iphone. &lt;/div&gt;
                        &lt;div class="tab-pane fade in " id="Sun"&gt;SETTING ... Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.&lt;/div&gt;
          &lt;/div&gt;&lt;!-- tabcontent --&gt;
      &lt;/div&gt; &lt;!-- span6 --&gt;
  &lt;/div&gt; &lt;!-- container fluid --&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;  
      &lt;script src="{{ STATIC_URL }}Bootstrap/js/bootstrap.js"&gt;&lt;/script&gt;  
      &lt;script type='text/javascript'&gt;//&lt;![CDATA[ 
      $(function(){
      $('#myTab a').click(function(e) {
          e.preventDefault();
          $(this).tab('show');
      })
  
  
  
      $('#myTab a:first').tab('show');
  
  
      });//]]&gt;  
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And my current view that handles that page:</p>
  
  <pre><code>def editworkout(request):
  day = DayModel.objects.get(id=1) #for testing purposes, until tabs are figured out
  if request.method == 'POST': 
      if 'strengthtrainingsubmit' in request.POST:
          form = StrengthExerciseForm(request.POST)
          if form.is_valid():
              day.strengthtraining.add(form.save()) #saves the model and returns its
              return HttpResponseRedirect(reverse('editworkout'))
      if 'intervalsubmit' in request.POST:
          form = IntervalForm(request.POST)
          if form.is_valid():
              day.intervalworkout.add(form.save());
              return HttpResponseRedirect(reverse('editworkout'))
      if 'warmupsubmit' in request.POST:
          form = AbstractExerciseForm(request.POST)
          if form.is_valid():
              day.warmup.add(form.save());
              return HttpResponseRedirect(reverse('editworkout'))            
  else:
          warmupform = AbstractExerciseForm()
          intervalform = IntervalForm()
          strengthform = StrengthExerciseForm()  
          return render_to_response('editworkout.html',
                            { 'mon':day,
                             'warmupform':warmupform,
                             'intervalform':intervalform,
                             'strengthform':strengthform, },
                            context_instance=RequestContext(request)
                           )
  </code></pre>