Django Templates and drop-down list

Question

I would like to render a Django form in the following manner...

Form UI

In particular, how would I go about populating and rendering the three drop-down lists based on the model provided.

The model

class Positions(models.Model):
    position_code = models.CharField(primary_key=True, max_length=8)
    name = models.CharField(max_length=64, blank=True, null=True)
    description = models.CharField(max_length=4000, blank=True, null=True)
    position_type = models.CharField(max_length=8, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'positions'

class Clubs(models.Model):
    club_id = models.AutoField(primary_key=True)
    short_name = models.CharField(max_length=4, blank=True, null=True)
    club_name = models.CharField(max_length=4000, blank=True, null=True)
    nickname = models.CharField(max_length=4000, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'clubs'

class Players(models.Model):
    player_id = models.AutoField(primary_key=True)
    first_name = models.CharField(max_length=512, blank=True, null=True)
    last_name = models.CharField(max_length=512, blank=True, null=True)
    dob = models.CharField(max_length=512, blank=True, null=True)
    display_name = models.CharField(max_length=512, blank=True, null=True)
    active = models.BooleanField(default=True)

    class Meta:
        managed = False
        db_table = 'players'

class DefaultSquads(models.Model):
    default_squad_id = models.AutoField(primary_key=True)
    club = models.ForeignKey(Clubs, models.DO_NOTHING)
    player = models.ForeignKey('Players', models.DO_NOTHING)
    position_code = models.ForeignKey('Positions', models.DO_NOTHING, db_column='position_code', blank=True, null=True)
    playing_status_code = models.CharField(max_length=16, blank=True, null=True)

    class Meta:
        managed = False
        db_table = 'default_squads'

The view

class DefaultSquadsViewCreate(CreateView):
    template_name = 'fafl/defaultSquad_form.html'
    model = DefaultSquads
    fields = ['player', 'position_code', 'playing_status_code']
    success_url = reverse_lazy('fafl:defaultSquads-list')

    def get_context_data(self, **kwargs):
        context = super(DefaultSquadsView, self).get_context_data(**kwargs)
        context['clubs'] = Clubs.objects.all().order_by('club_id')
        context['players'] = Players.objects.all().order_by('player_id')
        return context

The template

<form method="POST" class="form-horizontal">
  {% csrf_token %}
  <div class="box-body">

    <div class="form-group">
      <label for="{{ form.club.club_id.id_for_label }}" class="col-sm-2 control-lable">Club</label>
      <div class="col-sm-10">

        <!-- Not sure how ? -->

        <select id="{{ form.club.club_id.id_for_label }}" name="club" class="form-control">
          <option value="None"></option>
          {% for club in clubs %}
          <option value="{{ club.club_id }}" selected="selected">{{ club.nickname }}</option>
          {% endfor %}
        </select>



      </div>
    </div>
    <div class="form-group">
      <label for="{{ form.club_name.id_for_label }}" class="col-sm-2 control-lable">Player</label>
      <div class="col-sm-10">
        <input id="{{ form.short_name.id_for_label }}" type="text" name="short_name" maxlength="100" class="form-control" required />
      </div>
    </div>
    <div class="form-group">
      <label for="{{ form.club_name.id_for_label }}" class="col-sm-2 control-lable">Position</label>
      <div class="col-sm-10">
        <input id="{{ form.nickname.id_for_label }}" type="text" name="nickname" maxlength="6" class="form-control" required />
      </div>
    </div>
  </div>
  <div class="box-footer">
    <div class="margin">
      <button type="button" class="btn btn-danger pull-right" data-toggle="modal" data-target="#myModal"><i class="fa fa-trash" role="button"></i> Delete</button>

      <a href="{% url 'fafl:defaultSquad-list' 1 %}" class="btn btn-primary " role="button">Cancel</a>
      <button type="submit" class="btn btn-success"><i class="fa fa-check" role="button"></i> Save</button>
    </div>
  </div>
</form>

Answer 1

Since your question was only directed to form rendering . . .

In the view:

class DefaultSquadsViewCreate(CreateView):
    template_name = 'fafl/defaultSquad_form.html'
    model = DefaultSquads
    fields = ['player', 'position_code', 'playing_status_code']
    success_url = reverse_lazy('fafl:defaultSquads-list')

    def get_context_data(self, **kwargs):
        context = super(DefaultSquadsView, self).get_context_data(**kwargs)
        context['clubs'] = Clubs.objects.all().order_by('club_id')
        context['players'] = Players.objects.all().order_by('player_id')
        context['positions'] = Positions.objects.all()
        return context

In the template:

    <div class="form-group">
      <label for="{{ form.club.id_for_label }}" class="col-sm-2 control-label">Club</label>
      <div class="col-sm-10">    
        <select id="{{ form.club.id_for_label }}" name="{{ form.club.html_name }}" class="form-control">
          <option value="" selected>None</option>
          {% for club in clubs %}
          <option value="{{ club.club_id }}">{{ club.nickname }}</option>
          {% endfor %}
        </select>    
      </div>
    </div>
    <div class="form-group">
      <label for="{{ form.player.id_for_label }}" class="col-sm-2 control-label">Player</label>
      <div class="col-sm-10">    
        <select id="{{ form.player.id_for_label }}" name="{{ form.player.html_name }}" class="form-control">
          <option value="" selected>Please select a player</option>
          {% for player in players %}
          <option value="{{ player.player_id }}">{{ player.display_name }}</option>
          {% endfor %}
        </select>    
      </div>
    </div>

    <div class="form-group">
      <label for="{{ form.postion_code.id_for_label }}" class="col-sm-2 control-label">Position Code</label>
      <div class="col-sm-10">    
        <select id="{{ form.position_code.id_for_label }}" name="{{ form.position_code.html_name }}" class="form-control">
          <option value="" selected>Please select a Position</option>
          {% for position in positions %}
          <option value="{{ position.position_code }}">{{ position.name }}</option>
          {% endfor %}
        </select>    
      </div>
    </div>