Question

I have a project whereby am trying to regroup some fields where some will be visisble and others will be displayed in a form so i can apply java script on the fields to expand. Can any one advise me how can i do such thing both in my modelForm class and template strcuture?

models.py

class Page(models.Model):
    # version control columns
    version_from = models.DateTimeField(auto_now_add=True, editable=False)
    version_to = models.DateTimeField(null=True, blank=True, editable=False)
    # data
    name = models.CharField(_('Name'), max_length=10, help_text=_('The name of the page will be used as a display name & in navigation menus'))
    show_in_navigation = models.BooleanField(default=True)
    slug = models.SlugField(_('Slug'), )
    subject = models.CharField(_('Subject'), max_length=30, )
    html_title = models.CharField(_('HTML Title'), max_length=15, blank=True, null=True)
    keywords = models.CharField(_('HTML Keywords'), max_length=200, blank=True, null=True)
    content = models.TextField(_('Content'), )
    parent = models.ForeignKey('self', null=True, blank=True)
    # audit
    created_at = models.DateTimeField(auto_now_add=True)
    created_by = models.ForeignKey(User, editable=False)

    # objects manager
    objects = PageManager()

    class Meta:
        unique_together = (
            'id',
            'slug'
        )

forms.py

class PageForm(forms.ModelForm):
    class Meta:
        model = Page

page-form.html

    <form class="form well" method="POST">
        {% csrf_token %}
            {% if form.errors %}
            <div class="alert alert-error">
                <a class="close" data-dismiss="alert" href="add_blog.html#">&times;</a>
                <h3>Error</h3>
                {{ form.non_field_errors }}
                {% for field in form %}
                        {{ field.errors }}
                {% endfor %}
            </div>
            {%endif%}

            {% csrf_token %}

            {# Include the hidden fields #}
            {% for hidden in form.hidden_fields %}
                {{ hidden }}
            {% endfor %}

            {# Include the visible fields #}
            {% for field in form.visible_fields %}

                    {{ field.label_tag }} {{ field }}
                    <span class="help-block">{{ field.help_text }}</span>

            {% endfor %}
        <br />
        <input type="submit" value='{% trans 'Login' %}' class="btn" />
    </form>

my challenge is, how can i make the fields slug and keywords render in the html in a div tag and at the end.

below is example to what i wish to achieve

    <form class="form well" method="POST">
        {% csrf_token %}
            {% if form.errors %}
            <div class="alert alert-error">
                <a class="close" data-dismiss="alert" href="add_blog.html#">&times;</a>
                <h3>Error</h3>
                {{ form.non_field_errors }}
                {% for field in form %}
                        {{ field.errors }}
                {% endfor %}
            </div>
            {%endif%}

            {% csrf_token %}

            {# Include the hidden fields #}
            {% for hidden in form.hidden_fields %}
                {{ hidden }}
            {% endfor %}

            {# Include the visible fields #}
            {% for field in form.visible_fields %}

                    {{ field.label_tag }} {{ field }}
                    <span class="help-block">{{ field.help_text }}</span>

            {% endfor %}
            {% for collapsible_field in form.collapsible_fields %}
            <div class='collapsible'>
                    {{ field.label_tag }} {{ field }}
                    <span class="help-block">{{ field.help_text }}</span>                             
            </div>
            {%endfor%}
        <br />
        <input type="submit" value='{% trans 'Login' %}' class="btn" />
    </form>

the example above is to explain further my point, but i would go for any other approach.. Please advise?

Answer 1

The desired solution you proposed looks fine.
Just add these in your Form class:

class PageForm(forms.ModelForm):
    class Meta:
        model = Page

    def normal_fields(self):
        return [field for field in self if not field.is_hidden
               and field.name in ('field1', 'field2')]

    def collapsible_fields(self):
        return [field for field in self if not field.is_hidden
               and field.name in ('field4', 'field5', 'field3')]

and then in your template just use these methods:

{# Include the visible fields #}
{% for field in form.normal_fields %}

        {{ field.label_tag }} {{ field }}
        <span class="help-block">{{ field.help_text }}</span>

{% endfor %}
{% for field in form.collapsible_fields %}
<div class='collapsible'>
        {{ field.label_tag }} {{ field }}
        <span class="help-block">{{ field.help_text }}</span>                             
</div>
{%endfor%}