Динамическая форма в django с использованием поля choiceField

Я создаю свое первое веб-приложение на django и мне трудно понять, как использовать динамическую форму, чтобы иметь различный вывод для разных выбранных вариантов.

например, для выбора качественного значения, я хочу, чтобы форма была такой же (без дополнительных полей), но если выбрано количественное значение, я хочу, чтобы мой шаблон показывал дополнительные поля (value_min и Value_max)

первый вариант при выборе качественного значения

второй вариант при выборе количественного значения

спасибо за помощь...

Вы не можете использовать теги django для условий, потому что они отображаются только в бэкенде, так что это проблема фронтенда. В своих реализациях я обычно использую javascript со следующей идеей:

  • Начните с того, что значения min и max не отображаются (style.display = "None")
  • Добавьте слушатель события (тип onChange) к селектору (в вашем случае Mesure)
  • Проверьте выполнение условия с помощью javascript и измените style.display на block, например

Формы отображаются на шаблоне до загрузки страницы. Таким образом, переменные django не могут манипулироваться пользователем.

Во время рендеринга вашей формы django позволяет вам установить классы для полей формы. используйте их, чтобы скрыть дополнительные поля.

пример value_min = forms.CharField(widget=forms.TextInput(attrs={'class':'hide'}))

вы можете добавить проверку формы, пока clean

 class MYform(forms.Form):
     #....
     def clean_min_value(self):
       #check here for choice field value
       #return value or blank accordingly

аналогичным образом вы можете добавить валидаторы в форму, чтобы убедиться, что это значение будет установлено только в том случае, если выбор установлен в quantitative

value_min = forms.CharField(widget=forms.TextInput(attrs={'class':'hide'}), validators=[check_choice])

 def check_choice(Value):
   # validate Value

Спасибо @videap и @Rhea за вашу помощь... Итак, я понял, как решить мою проблему, используя руководство videap и пост Показывать и скрывать динамически поля в Django форме

Итак, решение было следующим:

для формы :

class NewCriterioForm(forms.ModelForm):
    parent = TreeNodeChoiceField(queryset=Criteria.objects.all())
    def __init__(self,*args,**kwargs):
        super().__init__(*args,**kwargs)
        
        self.criteria_CHOICES = [('FunCriteria','FunCriteria'),('nonFunCriteria','nonFunCriteria')]
        self.mesure_CHOICES = (('Quantitative','Quantitative'),('Qualitative','Qualitative'))
        self.fields['parent'].label=''
        self.fields['parent'].required=False
        self.fields['type']= forms.CharField(widget=forms.Select(choices=self.criteria_CHOICES))
        self.fields['mesure']= forms.ChoiceField(choices=self.mesure_CHOICES)
    class Meta:
        model = Criteria
        fields = ('name', 'parent', 'type','slug','description','mesure','value_min','value_max')

        }

для вида :

......
criterion = NewCriterioForm()
    return render(request, 'addCriteria.html', {'criterion': criterion})

И, наконец, в шаблоне я поместил этот код:

              <script>
                function Hide() {
                    if(document.getElementById('id_mesure').options[document.getElementById('id_mesure').selectedIndex].value == "Qualitative") {
                         document.getElementById('id_value_min').style.display = 'none';
                         document.getElementById('id_value_max').style.display = 'none';
                    } else {
                         document.getElementById('id_value_min').style.display = '';
                         document.getElementById('id_value_max').style.display = '';
                    }
                }
                
                window.onload = function() {
                    document.getElementById('id_mesure').onchange = Hide;
                };
                </script>
               
                <div>
                    {{ criterion.name.label_tag }}{{ criterion.name }}
                </div>
                <tr></tr>
                <div>
                    {{ criterion.parent.label_tag }}{{ criterion.parent }}
                </div>
                <div>
                    {{ criterion.type.label_tag }}{{ criterion.type }}
                </div>

                <div>
                  {{ criterion.slug.label_tag }}{{ criterion.slug }}
                 </div>
                 <div>
                  {{ criterion.description.label_tag }}{{ criterion.description }}
                  </div>
                  <div>
                  {{ criterion.mesure.label_tag }}{{ criterion.mesure }}
                  </div>

                <div id="id_value_min">
                {{ criterion.value_min.label_tag }}{{ criterion.value_min }}
                </div>
                  <div id="id_value_max">
                    {{ criterion.value_max.label_tag }}{{ criterion.value_max }}
                 </div>
Вернуться на верх