I created two models, one to handle the teams and another to handle the match. I would like to create a view where the user can select team1 or team2 with a form by cliking on the image logo. I manage to
models.py :
class Team(models.Model):
name = models.CharField(max_length=200)
logo = models.ImageField(upload_to="images/")
abbr = models.CharField(max_length=5)
class Match(models.Model):
team1 = models.ForeignKey('Team', related_name='team1', on_delete=models.PROTECT)
team2 = models.ForeignKey('Team', related_name='team2', on_delete=models.PROTECT)
date = models.DateField(null=True)
I managed to show the images with a div like this. But I’m stuck at rendering a form that will show the image
<div class="container">
<div class="row" style="background-color:gray;">
{% for match in Matches %}
<div class="col-2">{{ match.team1.name }}</div>
<div class="col-3"><img src={{match.team1.logo.url}} alt={{ match.team1.logo.url }} width="100" height="100"></div>
<div class="col-2">{{ match.date }}</div>
<div class="col-2">{{ match.team2.name }}</div>
<div class="col-3"><img src={{match.team2.logo.url}} alt={{ match.team2.logo.url }} width="100" height="100"></div>
{% endfor %}
</div>
Tryout form
<div class="row" style="background-color:gray;">
{% for match in Matches %}
<select name="test" class="form-control">
<option value={{match.team1.abbr}}><img src={{match.team1.logo.url}} alt={{match.team1.name}} width="100" height="100"></option>
<option value={{match.team2.abbr}}><img src={{match.team2.logo.url}} alt={{match.team2.name}} width="100" height="100"></option>
</select>{% endfor %}
</div>
I am using Django 4.0.6 and I’m wondering how to show a simple form that will display the two logo and make them selectable (single selection, no need for multi).
Thank you