如何修改django小部件形式的按钮的类？

Question

I'm trying to set the class for a form widget. I have:

<form action="{% url "list" %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.input.label_tag }} {{ form.input.help_text }}</p>
        <p>
            {{ form.input.errors }}
            {{ form.input }}
        </p>
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.itinerary.label_tag }} {{ form.itinerary.help_text }}</p>
        <p>
            {{ form.itinerary.errors }}
            {{ form.itinerary }}
        </p>
        <p><input class="button-primary" type="submit" value="Upload" /></p>
</form>

and it looks like

I attempted to use django tweak tools when I tried googling to find a solution for my problem. I modified the code to be like this too see how it would change:

<form action="{% url "list" %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% load widget_tweaks %}
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.input.label_tag }} {{ form.input.help_text }}</p>
        <p>
            {{ form.input.errors }}
            {{ form.input }}
            {% render_field form.input class="button" %}
        </p>
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.itinerary.label_tag }} {{ form.itinerary.help_text }}</p>
        <p>
            {{ form.itinerary.errors }}
            {{ form.itinerary }}
        </p>
        <p><input class="button-primary" type="submit" value="Upload" /></p>
    </form>

and that looks like

It applies the class to the whole widget, and it turns the whole widget into a button.

So how can I apply the class to just the button in the widget?

Answer 1

So there really isn't an easy way to add a class to a form element.

The way I was able to solve this was to create a custom template tag.

If you interested in learning more about this you can visit the following link: https://docs.djangoproject.com/en/1.7/howto/custom-template-tags/

What I did was create a directory under the app directory called templatetags.

Make sure you have an __init__.py in this directory, and then create another file. I named mine template_helper.py

    # template_helper.py
    from django import template
    from django.utils.datastructures import SortedDict

    register = template.Library()

    @register.filter(name='addcss')
    def addcss(field, css):
       return field.as_widget(attrs={"class":css})

In the actual template you would just have to first load the template_helper via: {% load template_helper %} then add the {{ form_element|addcss:"button" }}

You'll want to somehow check with the template tags {% if ... %} to make sure you only apply the class to the button if you only want to apply the class to the button.

    {% load template_helper %}
    <form action="{% url "list" %}" method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.input.label_tag }} {{ form.input.help_text }}</p>
        <p>
            {{ form.input.errors }}
            {% for field in form.input %}
                {{ field|addcss:"button" }}
            {% endfor %}
        </p>
        <p>{{ form.non_field_errors }}</p>
        <p>{{ form.itinerary.label_tag }} {{ form.itinerary.help_text }}</p>
        <p>
            {{ form.itinerary.errors }}
            {{ form.itinerary }}
        </p>
        <p><input class="button-primary" type="submit" value="Upload" /></p>
    </form>

Good Luck!