CODEWITHSUNDEEP
pythondjangodjango-templatesdjango-widget
Pradeep
Pradeep

Reputation: 639

Changing the default markup of the RadioSelect django widget

I am using python version 3.6.8 and django version 3.0.8. I have seen a lot of topics related to this in this forum but some are very old answers. Not sure which one to follow. I tried referring to the django official documentation which exactly talks about the markup that I want to customize from the default ul/li markup for a radio select to my own styling as per my css. Not sure what is it that I am missing. Can anyone help me as to how to go about achieving this in the django version that I am using. Thanks in advance.

Django Official Documentation:

https://docs.djangoproject.com/en/3.0/ref/forms/widgets/#radioselect

When I try doing this I get the error : Error during template rendering 'ChoiceField' object is not iterable

The forms.py code is the following:

from django import forms

class ContactUsForm(forms.Form):

    name = forms.CharField(label='Name',
            widget=forms.TextInput(attrs={'class' : 'form__input', 'placeholder' : 'Name'}))
    email = forms.EmailField(label='Email',
            widget=forms.EmailInput(attrs={'class' : 'form__input', 'placeholder' : 'Email'}))
    mobile = forms.CharField(label='Mobile',
            widget=forms.TextInput(attrs={'class' : 'form__input', 'placeholder' : 'Mobile', 'type' : 'tel'}))
    message = forms.CharField(label='Message', widget=forms.Textarea(attrs={'class' : 'form__input',
        'placeholder' : 'Message', 'rows' : "4" , 'cols' : '50'}))

    CHOICES = [
            ('1', 'New Projects'),
            ('2', 'Interiors'),
            ('3', 'Land Resale'),
            ('4', 'Joint Venture'),
            ('5', 'Renovation'),
            ('6', 'Others'),
    ]

    cat_field = forms.ChoiceField(widget=forms.RadioSelect(attrs={'class' : 'form__radio-input', 'name' : 'services'}),
            choices=CHOICES)

Template Tags that I use in my template is below:

 {% for radio in form.fields.cat_field %}
   <div class="myradio">
    {{ radio }}
   </div>
 {% endfor %}

Upvotes: 2

Views: 417

Answers (1)

Riyas Ac
Riyas Ac

Reputation: 1613

Please use like this.Here we consider widget input type.And type is radio then do something.

{% for field in form.visible_fields %}
    <li>
        {% if field.field.widget.input_type == 'radio' %}
            <div class="myradio">
                {{ radio }}
            </div>
        {% endif %}
    </li>
{% endfor %}

For print your widget type

{{ [FIELD].field.widget.input_type }}

[FIELD] is your field name.

Upvotes: 2

Related Questions