Display Form Field based on other Fields within the Django Form -

i trying create way display fields within django form based on bound data of field within same form. i'm familiar idea of form.field.bound_type i'm not sure how continually check state change on field in form , update other field accordingly. if filling out application , asked if you've committed crime, if click yes details text area pops up.

i'm using: django 1.8.4 bootstrap3 6.6.2

as pertains question. here i've got field values edited work protection. sort of work. meaning form fine, if statement works doesn't reevaluate if once specified field has changed.

<form action= "/send_email/" method="post" class='col-sm-5'>     {% 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 %}         <button type="submit" class="btn btn-primary">             {% bootstrap_icon "glyphicon glyphicon-ok-circle" %} submit         </button>     {% endbuttons %} </form> 

solution: birdie's able figure out solution. has hit same django related problem here how add or remove fields based on field in same form.

<script>      // function hides/shows field_four based upon field_three value     function check_field_value(new_val) {         if(new_val != 'a value') {             // #id_field_four should id of html element             // surrounds want hide.  since did             // not post html can't finish part you.             $('#field_four').removeclass('hidden');         } else {             $('#field_four').addclass('hidden');         }     }        // executed once when page loads     $(document).ready(function() {          // set things function called when field_three changes         $('#field_three').change( function() {             check_field_value(this.value);         });      });  </script> <form action= "/send_email/" method="post" class='col-sm-5'>     {% csrf_token %}     {% bootstrap_field form.field_one%}     {% bootstrap_field form.field_two%}     <div id="field_three">{% bootstrap_field form.field_three%}</div>     <div id="field_four">{% bootstrap_field form.additional_notes %}</div>     {% buttons %}         <button type="submit" class="btn btn-primary">             {% bootstrap_icon "glyphicon glyphicon-ok-circle" %} submit         </button>     {% endbuttons %} </form> 

you cannot within template because template executed on server side, user interaction occurs on client side.. in browser. must done in javascript , run in browser.

here example of jquery code this. did not test may need tweaking, should in right direction.

you need @ html determine id of element want hide() , show(). have kind of html element (eg. div) surrounding both field or fields want hide label(s).. , hide @ once hiding element contains fields, rather each individual field itself.

if add html surrounding field_four question, update answer work you've got...

<script> // ideally script (javascript code) in head of page // if put @ bottom of body (bottom of template) should ok too. // need jquery loaded since using bootstrap should // taken care of.  if not, have deal that.      // function hides/shows field_four based upon field_three value     function check_field_value() {         if($(this).val() == 'a value') {             // #id_field_four should id of html element             // surrounds want hide.  since did             // not post html can't finish part you.               $('#id_field_four').hide();         } else {             $('#id_field_four').show();         }     }      // executed once when page loads     $(document).ready(function() {         // set things function called when field_three changes         $('#id_field_three').change(check_field_value);          // set state based on initial values         check_field_value.call($('#id_field_three').get(0));     });  </script>