Multiple choices field in a django form

Using Django Forms & APIs
1

Hi folks, I’m trying to add a section to my django form where the user can choose one or several options. This list of options is retrieved from another form and it is customizable. Now my problem is that the checkboxes that I have designed are not shown.

Here is my models.py:

class PatientPersonalInfo(models.Model):
    file_number = models.IntegerField(unique=True)
    identification_number = models.IntegerField(unique=True)
    first_name = models.CharField(max_length=255)
    last_name = models.CharField(max_length=255)
    father_name = models.CharField(max_length=255)
    birth_date = BirthdayField()
    occupation = models.CharField(max_length=255)
    phone = models.CharField(max_length=255)
    mobile_phone = models.CharField(max_length=255)
    address = models.TextField(null=True, blank=True)
    ailment = models.ManyToManyField('Ailment')
    treatment = models.ManyToManyField('Treatment')

class Ailment(models.Model):
    ailment = models.CharField(max_length=255)
    patient = models.CharField(max_length=255)

    def __str__(self):
        return self.ailment

this is forms.py:

class AddPatientForm(forms.ModelForm):
    ailments = forms.ModelMultipleChoiceField(queryset=Ailment.objects.all(), required=False, widget=forms.CheckboxSelectMultiple)

    class Meta:
        model = PatientPersonalInfo
        fields = ('file_number', 'identification_number', 'first_name', 'last_name', 'father_name', 'birth_date', 'occupation', 'phone', 'mobile_phone', 'address', 'ailments')

and this is the form

{% extends 'managers/base.html' %} {% block content %}
<div class="row">
  <div class="mx-auto col-10 col-md-8 col-lg-6">
    <div class="card">
      <div class="card-body">
        <form method="post">
          {% csrf_token %}
          <div class="form-group">
            <input
              type="number"
              class="form-control"
              placeholder="شماره پرونده"
              name="file_number"
            />
          </div>
          <div class="form-group">
            <input
              type="number"
              class="form-control"
              placeholder="شماره ملی"
              name="identification_number"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              placeholder="نام"
              name="first_name"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              placeholder="نام خانوادگی"
              name="last_name"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              placeholder="نام پدر"
              name="father_name"
            />
          </div>
          <div class="form-group">
            <input
              type="date"
              class="form-control"
              placeholder="تاریخ تولد"
              name="birth_date"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              placeholder="شغل"
              name="occupation"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              placeholder="تلفن"
              name="phone"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              placeholder="همراه"
              name="mobile_phone"
            />
          </div>
          <div class="form-group">
            <input
              type="text"
              class="form-control"
              placeholder="آدرس"
              name="address"
            />
          </div>
          {% for ailment in ailments %}
          <div class="form-group">
            <input type="checkbox" class="form-control" name="{{ ailment.ailments }}"/>
            {% endfor %}
          </div>
          <button type="submit" class="btn btn-primary">ثبت</button>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %}

I think the problem lies in the html file but I’m not sure.
I appreciate any help in advance.

2

Django provides a widget for that - CheckboxSelectMultiple.
You should be rendering it as the widget for this field instead of trying to render the individual checkboxes yourself. (In other words, you render the form field as the form field, like you render any other form field.)

When working with Django forms, you shouldn’t be rendering the input fields as html.

I suggest you review the entire Working with Forms docs, particularly the section for rendering form fields.

1 Like