Поле формы django отображается не по порядку

У меня есть такая форма и модель для группы:

class GroupForm(forms.ModelForm):
    class Meta:
        model = Group
        fields = ('leader', 'description', 'size', 'max_size', 'motto')

        widgets = {
            'size': forms.CheckboxInput(attrs={'id': 'size'}),
            'max_size': forms.TextInput(attrs={'type': 'hidden', 'id': 'maxSize'}),
        }

У создателя группы есть возможность отметить "да" для size и, сделав это, я использовал javascript для изменения типа max_size на show.

В моем create_group.html шаблоне:

<script>
    let size = document.getElementById('size')
    let maxSize = document.getElementById('maxSize')
    let checked = false
    
    size.onclick = () => {
        checked = !checked
        if (checked === true) {
            maxSize.type = 'show'
        } else {
            maxSize.type = 'hidden'
        }
        
    }
</script>

Теперь это работает нормально, единственная проблема в том, что поля отображаются не по порядку.

Когда страница загружается, max_size становится false, а его поле не отображается. Что хорошо. Однако, когда пользователь проверяет, что группа имеет размер, и, впоследствии, max_size имеет отображение show, поле отображается после поля motto, а не в правильном порядке согласно fields = ('leader', 'description', 'size', 'max_size', 'motto').

Кроме того, поле max_size включено внутрь самого элемента motto, а не как собственное поле:

enter image description here

по сравнению с другими полями, которые находятся каждый в своем собственном <p></p>.

Я предполагаю, что {{form.as_p}} и т.д. сначала отображают все видимые поля, а затем скрытые.

Вы можете явно вывести поля в нужном вам порядке в вашем шаблоне. Вместо жесткого кодирования порядка в шаблоне, возможно следующее (я никогда не пробовал):

FIELD_ORDER = ( ('leader', 'description', 'size', 'max_size', 'motto')
class GroupForm(forms.ModelForm):
    class Meta:
        model = Group
        fields = FIELD_ORDER

Передайте вашему шаблону список полей, явно расположенных в нужном вам порядке:

fields_in_order = [ form[x] for x in FIELD_ORDER ]

В шаблоне

{% for field in fields_in_order %}
   {{field}}
{% endfor %}

Или, вы можете сделать так, чтобы скрытие этого поля выполнялось с помощью JS

Если кто-то еще столкнется с этой проблемой, можно также просто использовать js и css. В данный момент я использую javascript, чтобы увидеть, проверен ли size, и если да, то maxSize.style.display = 'block' против maxSize.style.display = 'none', если size не проверен.

Затем у меня возникла проблема с тем, что ярлык формы django все еще остается видимым. Чтобы исправить это, я увидел ответ на dev.to, который вы можете посмотреть сами.

Теперь моя проблема в том, что я не знаю, как добавить метку, которая будет видна только тогда, когда поле формы видно.

Вернуться на верх