How to populate/filter a Select field dynamically from an other Select field inside the same form

Question

I'm pretty new to django and I have some trouble with a form.

Currently, I have a form working with 10 fields. However, what I'm looking for is specific between two Select Fields. I want my second Select field to be filtered with the choice of the first Select field. My models are connected to a bdd.

models.py

class Mission(models.Model):
    fk_consultant = models.ForeignKey(Consultant, on_delete = models.PROTECT)
    manager = models.CharField(max_length = 3, blank = True, null = True)
    project_name = models.CharField(max_length = 50)

class Consultant(models.Model):
    matricule = models.CharField(max_length = 30, blank = True, unique = True)
    name = models.CharField(max_length = 50)
    first_name = models.CharField(max_length = 50)
    fk_teams_gestion = models.ManyToManyField(Team, related_name='gestion', blank=True)

Here fk_consultant is corresponding to a consultant id in Consultant (we don't see it in the model, it's auto-incremented when pushing in the database)

forms.py

class MissionForm(forms.ModelForm):
    def __init__(self, cslt, *args, **kwargs):
        super(MissionForm, self).__init__(*args, **kwargs)
        self.fields['fk_consultant'].widget = forms.Select(
            attrs={'class': "form-control", "onClick": "fillCsltInfo(this.id, value)"}, choices=[('', '')] + [(c.id, c) for c in cslt])
        self.fields['project_name'].widget = forms.Select(attrs={'class': "form-control"},
                                                        choices=[('', '')])

    class Meta:
        model = Mission
        fields = ['fk_consultant', project_name']
        labels = {
            'fk_consultant': "Consultant*",
            'project_name': "Name of the project*"

        widgets = {
            'fk_consultant': forms.Select(attrs={'class': "form-control"}),
            'project_name': forms.TextInput(attrs={'class': "form-control"})
        }

views.py

mission_form = MissionForm(cslt, auto_id='id_start_%s') #where cslt is a list of Consultant model

myfile.js

function fillCsltInfo(id, val){
    var form_start_project = document.getElementById('id_start_project_name');
    form_start_project.value= val;
}

What id does is take the selected consultant in the select, however, I can't see how to get the Mission data and filter it.

So I would like when the Select field is clicked, a filter is performed and then the result is populated in my second Select field. A consultant has zero or n missions and a mission has only one consultant.

Is that possible? I looked around and found a complex answer (for example with kwargs CHOICES but I don't understand If this is what I want) django documentation

Answer 1

You will need to write Javascript code to handle the click event on the first select field to

A. retrieve the available options and

B. populate the second select field.

For a solution without Javascript, you will need to split your form into two forms. Upon submitting the first form, you could calculate the available choices for the select field in the second form.