Using Django forms to render a large query of radio buttons in a more user friendly way

165 views Asked by At

I am trying to display time slots that users can select at time of application. Sometimes there will be quite a large number of slots.

The issue is that I am currently using radio buttons, and a ModelChoiceField.

I've attached an image below of what I have currently.

This is what it does now.

I am not sure if I need to use React or another front end framework. What I want is to display the radio buttons in a way thats not just an enormous list immediately, but rather a shorter list paired down into groups.

I've thought about using CSS to hide some of the times. Perhaps having a checkbox for every hour that can display and hide the radio buttons within that hour (most slots are 5 minutes), but I get stuck trying to filter and render the form that way using a ModelChoiceField.

My ModelForm class for what its worth:

class ApplicationForm(forms.ModelForm):
    slot_choice = forms.ModelChoiceField(queryset=None,
        label="Please select a time slot. (You can change this at a later time if your schedule changes)",
        empty_label="Please select a time slot",
        widget=forms.RadioSelect(attrs={'class': 'custom-control-input'}))

    class Meta:
        model = Application
        fields = ['resume', 'cover_letter']

    def __init__(self, show, *args, **kwargs):
        super(ApplicationForm, self).__init__(*args, **kwargs)
        # only display slots for current show that are not filled.
        self.fields['slot_choice'].queryset = Slot.objects.filter(show=show).filter(application__isnull=True).order_by('start')

My view is really just passing in a Show object as an argument to the form. Something like ApplicationForm(Show.objects.get(pk=show_id)).

Some background on the Models if it helps. There is a Show model. Then 2 models: Slot and Application which both have a show fk. Slot also has an application foreign key. Goal of the form (this works) is to create an application object, and also add the application to a Slot object that is available.

0

There are 0 answers