title: Display Form Field based on other Fields within the Django Form
body: <p>I am trying to create a way to only display certain fields within a django form based on the bound data of another field within that same form. I'm familiar with the idea of form.field.bound_type but I'm not sure how to continually check for state change on a field in a form and update the other field accordingly. Something like if you were filling out an application and it asked if you've committed a crime, if you click yes then a details text area pops up. </p>
  
  <p>I'm using:
    Django 1.8.4
    Bootstrap3 6.6.2</p>
  
  <p>As it pertains to this question. Here is what I've currently got with the field values edited for work protection. It does SORT of work. Meaning the form is fine, the if statement works initially but it doesn't reevaluate the if once the specified field has changed.</p>
  
  <pre><code>&lt;form action= "/send_email/" method="post" class='col-sm-5'&gt;
      {% csrf_token %}
      {% bootstrap_field form.field_one%}
      {% bootstrap_field form.field_two%}
      {% bootstrap_field form.field_three%}
      {% if form.field_three.bound_data == "A Value" %}
          {% bootstrap_field form.field_four%}
      {% endif %}
      {% buttons %}
          &lt;button type="submit" class="btn btn-primary"&gt;
              {% bootstrap_icon "glyphicon glyphicon-ok-circle" %} Submit
          &lt;/button&gt;
      {% endbuttons %}
  &lt;/form&gt;
  </code></pre>
  
  <p>Solution:
  With Birdie's help I was able to figure out the solution. For anyone who has hit this same Django related problem here is how you add or remove fields based on another field in the same form.</p>
  
  <pre><code>&lt;script&gt;
  
      // function that hides/shows field_four based upon field_three value
      function check_field_value(new_val) {
          if(new_val != 'A value') {
              // #id_field_four should be actually the id of the HTML element
              // that surrounds everything you want to hide.  Since you did
              // not post your HTML I can't finish this part for you.
              $('#field_four').removeClass('hidden');
          } else {
              $('#field_four').addClass('hidden');
          }
      }
  
  
  
      // this is executed once when the page loads
      $(document).ready(function() {
  
          // set things up so my function will be called when field_three changes
          $('#field_three').change( function() {
              check_field_value(this.value);
          });
  
      });
  
  &lt;/script&gt;
  &lt;form action= "/send_email/" method="post" class='col-sm-5'&gt;
      {% csrf_token %}
      {% bootstrap_field form.field_one%}
      {% bootstrap_field form.field_two%}
      &lt;div id="field_three"&gt;{% bootstrap_field form.field_three%}&lt;/div&gt;
      &lt;div id="field_four"&gt;{% bootstrap_field form.additional_notes %}&lt;/div&gt;
      {% buttons %}
          &lt;button type="submit" class="btn btn-primary"&gt;
              {% bootstrap_icon "glyphicon glyphicon-ok-circle" %} Submit
          &lt;/button&gt;
      {% endbuttons %}
  &lt;/form&gt;
  </code></pre>