title: Dynamic hide/unhide tab regarding a form field value in django template
body: <p>I have a template that renders three forms in tabs.</p>
  
  <p>The third form is hidden and I want to  dynamically in if a value in a field (having choices via drop down) of the second form is selected.</p>
  
  <p>When I select the option <strong>b-option</strong> on the second form, I want to unhide the third tab.</p>
  
  <p>Any ideas?</p>
  
  <p><strong>input.html (template)</strong></p>
  
  <pre><code>&lt;form class="form-horizontal" method="post"&gt;
      {% csrf_token %}
  
      &lt;div class="tab-pane"&gt;
          &lt;ul class="nav nav-tabs"&gt;
              &lt;li class="active"&gt;
                  &lt;a href="#1" data-toggle="tab"&gt;Demographics&lt;/a&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;a href="#2" data-toggle="tab"&gt;Diagnosis&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="hide"&gt;
                  &lt;a href="#3" data-toggle="tab"&gt;A_b_sickle&lt;/a&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;div class="tab-content"&gt;
              &lt;div class="tab-pane fade in active" id="1"&gt;
                  &lt;div class="container"&gt; {%crispy frm%}&lt;/div&gt;
  
              &lt;/div&gt;
              &lt;div class="tab-pane fade" id="2"&gt;
                  &lt;div class="container"&gt;{%crispy frm_d%}&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="tab-pane" id="3"&gt;
                  &lt;div class="container"&gt; {%crispy frm_a_b_s%}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>def input(request):
  
      context = RequestContext(request)
  
  
      if request.method == 'POST':
          my_demographics = DemographicForm(request.POST, prefix="demo")
          my_diagnosis = DiagnosisForm(request.POST, prefix='diag')
          my_a_b_sickle= A_b_sickle_thalForm(request.POST,prefix='a_b_s')
  
          if my_demographics.is_valid() and my_diagnosis.is_valid() and my_a_b_sickle.is_valid:
              my_demographics_object = my_demographics.save()
              my_diagnosis_object = my_diagnosis.save(commit=False)
              my_diagnosis_object.patient = my_demographics_object
              my_diagnosis_object.save()
  
              my_a_b_sickle_object = my_a_b_sickle.save(commit=False)
              my_a_b_sickle_object.patient = my_demographics_object
  
              my_a_b_sickle_object.save()
      else:
          my_demographics = DemographicForm(prefix='demo')
          my_diagnosis = DiagnosisForm(prefix='diag')
          my_a_b_sickle= A_b_sickle_thalForm(prefix='a_b_s')
  
      return render_to_response('input.html', {'frm':my_demographics, 'frm_d': my_diagnosis, 'frm_a_b_s': my_a_b_sickle}, context)
  </code></pre>
  
  <p><strong>models.py</strong></p>
  
  <pre><code>class Diagnosis(models.Model):
      patient = models.ForeignKey(Demographic)
      age_of_diagnosis = models.IntegerField(null=True,blank=True)
      diagnosis_option_value = (
          ('a-option', 'a-option'),
          ('b-option', 'b-option'),
      )
      diagnosis_option = models.CharField( max_length=45,choices=diagnosis_option_value, default=diagnosis_option_value[0][0])
  
      def __str__(self):
          return str(self.patient)
  </code></pre>
  
  <p><strong>Edit: template code after rendering</strong></p>
  
  <pre><code>&lt;div id="div_id_diag-diagnosis_option" class="form-group"&gt;&lt;label for="id_diag-diagnosis_option" class="control-label  requiredField"&gt;
      Diagnosis option&lt;span class="asteriskField"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;div class="controls "&gt;&lt;select class="select form-control" id="id_diag-diagnosis_option" name="diag-diagnosis_option"&gt;&lt;option value="a-option" selected="selected"&gt;a-option&lt;/option&gt;&lt;option value="b-option"&gt;b-option&lt;/option&gt;select&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>Edited: my solution</strong></p>
  
  <pre><code>    &lt;script&gt;
          $(document).ready(function() {
              $('#id_diag-diagnosis_option').change(function () {
                  var value = $(this).val()
                  if (value === 'b-option'){
                      $('#mytab a[href="#3"]').parent().removeClass("hide");
                  }
  
              });
          });
      &lt;/script&gt;
  </code></pre>