Поле формы отображения на основе других полей в форме Django

Question

Я пытаюсь создать способ отображения только определенных полей в форме django на основе связанных данных другого поля внутри той же формы. Я знаком с идеей form.field.bound_type, но я не уверен, как постоянно проверять изменение состояния на поле в форме и соответственно обновлять другое поле. Что-то вроде, если вы заполняете заявку и спрашиваете, совершили ли вы преступление, если вы нажмете «да», появится всплывающая область с информацией.

Я использую: Django 1.8.4 Bootstrap3 6.6.2

Как относится к этому вопросу. Вот что я получил в настоящее время с значениями полей, отредактированными для защиты работы. Это делает СОРТ работы. Значение формы прекрасное, оператор if работает вначале, но он не переоценивает значение if, если указанное поле изменилось.

<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> 

Решение: С помощью Берди, я был в состоянии выяснить решения. Для тех, кто попал в эту же проблему, связанную с Django, вы можете указать, как вы добавляете или удаляете поля на основе другого поля в той же форме.

<script> 

    // 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); 
     }); 

    }); 

</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> 

Answer 1

Вы не можете сделать это в шаблоне, так как шаблон выполняется на стороне сервера, но взаимодействие с пользователем происходит на стороне клиента .. в браузере. Это необходимо сделать в javascript и запустить в браузере.

Ниже приведен пример кода jQuery, который делает это. Я не тестировал его, поэтому может потребоваться настройка, но это должно помочь вам в правильном направлении.

Вам нужно будет просмотреть свой HTML-код, чтобы определить идентификатор элемента, который вы хотите скрыть() и show(). Обычно у вас будет какой-то HTML-элемент (например, DIV), окружающий как поле, так и поля, которые вы хотите скрыть, а также метки (метки) .. и вы сразу скроете все, сокрыв элемент, который содержит все полей, а не каждого отдельного поля.

Если добавить HTML окружающий field_four на ваш вопрос, я буду обновлять ответ работать с тем, что у вас есть ...

<script> 
// Ideally this script (javascript code) would be in the HEAD of your page 
// but if you put it at the bottom of the body (bottom of your template) that should be ok too. 
// Also you need jQuery loaded but since you are using bootstrap that should 
// be taken care of. If not, you will have to deal with that. 

    // function that hides/shows field_four based upon field_three value 
    function check_field_value() { 
     if($(this).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. 
      $('#id_field_four').hide(); 
     } else { 
      $('#id_field_four').show(); 
     } 
    } 

    // this is executed once when the page loads 
    $(document).ready(function() { 
     // set things up so my function will be called when field_three changes 
     $('#id_field_three').change(check_field_value); 

     // set the state based on the initial values 
     check_field_value.call($('#id_field_three').get(0)); 
    }); 

</script>