Django. Не работает форма множественного отображения звездного рейтинга в сеточном представлении

У меня небольшая проблема. У меня есть страница, которая используется для оценки горнолыжных курортов. Они отображаются в виде сетки, и под каждым курортом есть форма оценки звезд. Проблема в том, что только первый элемент в сетке может быть оценен. Я пытался присвоить каждой форме уникальный идентификатор, но это не сработало.

Вот код:

class AddRatingForm(forms.ModelForm):
    class Meta:
    model = ResortUserRating
        fields = '__all__'

        widgets = {
            'resort_rating': forms.RadioSelect()
        }

    def __init__(self, pk,  *args, **kwargs):
        super(AddRatingForm, self).__init__(*args, **kwargs)
        self.pk = pk
        self.fields['user'].initial = self.pk

    def clean(self):
        return self.cleaned_data


{% for resort in dashboard_resorts %}

                    <div class = "grid-item">
                        {% if resort.img %}
                            <img class="card-img-top" src="{{resort.img.url}}"  alt 
                            ="Card image cap" height="300px" width="380px">
                        {% endif %}
                        <p> <b>{{resort.name|upper}} </b></p>
                        <p> <b>{{resort.id|upper}} </b></p>

                        <form method="post" action = "{% url 'aplicatie2:rating' %}">
                            {% csrf_token %}
                            <input type = "hidden" name = "user" value = "{{user.id}}">
                            <input  type = "hidden" name = "resorts" value = " 
                            {{resort.id}}">

                            <div class="rate">
                                <input type="radio" name="resort_rating" id="rating1" 
                                 value="1" required /><label for="rating1" title="1"> 
                                </label>
                                <input type="radio" name="resort_rating" id="rating2" 
                                 value="2" required /><label for="rating2" title="2"> 
                                 </label>
                                <input type="radio" name="resort_rating" id="rating3" 
                                    value="3" required /><label for="rating3" title="3"> 
                                </label>
                                <input type="radio" name="resort_rating" id="rating4" 
                                value="4" required /><label for="rating4" title="4"> 
                                </label>
                                <input type="radio" name="resort_rating" id="rating5" 
                                value="5" required /><label for="rating5" title="5"> 
                                </label>
                                </div>
                            <br>
                            <input type = "submit" class = "btn btn-primary" value = 
                            "submit">
                            {{form.errors}}
                        </form>
                    </div>
    {% endfor %}

Проблема здесь в том, что вы повторно используете атрибут name и идентификаторы в разных группах радиокнопок. Они должны быть уникальными. Из-за этого весь HTML, сгенерированный в вашем цикле for, на самом деле создает только один набор радиокнопок.

Один из способов решения этой проблемы - использовать forloop.counter в вашем шаблоне, чтобы добавить уникальный элемент к именам и id в каждом цикле.

 <input type="radio" name="resort_rating_group{{forloop.counter}}" id="rating_group{{forloop.counter}}_1" 
 value="1" required /><label for="rating_group{{forloop.counter}}_1" title="1"> 
 </label>
 <input type="radio" name="resort_rating_group{{forloop.counter}}" id="rating_group{{forloop.counter}}_2" 
 value="1" required /><label for="rating_group{{forloop.counter}}_2" title="2"> 
 </label>
Вернуться на верх