Удаление {{ choice.tag }} в шаблоне Django ломает функцию обновления JavaScript для выбора радиокнопки

В моем Django-приложении есть форма с радиокнопками для выбора количества приемов пищи в неделю. Форма также содержит флажки для выбора блюд. Я инициализировал предварительно выбранное значение для этих полей в моей форме. Я использую JavaScript для динамического обновления раздела сводки на основе предварительно выбранных значений при загрузке страницы.

Радиокнопки для meals_per_week генерируются Django и включаются в HTML-шаблон. Если я удалю {{ choice.tag }}, функция updateSummary больше не будет получать выбранное значение для meals_per_week. Как я могу решить эту проблему, удалив {{ choice.tag }}?

Вот соответствующая часть моего HTML-шаблона:

{% for choice in form.meals_per_week %}
<div class="flex-fill mx-1">
    <div class="card mb-4 custom-card" data-input-id="{{ choice.id_for_label }}">
        <div class="card-body text-center">
            <input type="radio" class="hidden-input" id="{{ choice.id_for_label }}" name="{{ choice.name }}" value="{{ choice.choice_value }}" {% if choice.is_checked %}checked{% endif %}>
            {{ choice.tag }}
            <label class="form-check-label d-block" for="{{ choice.id_for_label }}">
                {{ choice.choice_label }}
            </label>
        </div>
    </div>
</div>
{% endfor %}    

А вот моя функция JavaScript, которая обновляет сводку:

async function updateSummary() {
const mealsPerWeek = **parseInt(document.querySelector('input[name="meals_per_week"]:checked').value);**
const mealPreferences = Array.from(document.querySelectorAll('input[name="meal_preference_type"]:checked')).map(el => el.value);

let response = await fetch(`/get_price?meals_per_week=${mealsPerWeek}`);
let data = await response.json();

const pricePerServing = data.price_per_serving.toFixed(2);
const planPrice = (pricePerServing * mealsPerWeek).toFixed(2);

document.getElementById('meal_preference_type').innerText = mealPreferences.join(', ');
document.getElementById('meals_per_week').innerText = mealsPerWeek;
document.getElementById('price_per_serving').innerText = pricePerServing;
document.getElementById('plan_price').innerText = planPrice;
}
document.addEventListener('DOMContentLoaded', () => {updateSummary();
});    

Я попытался сделать то же самое с простой формой без каких-либо предварительно выбранных полей, и она работала нормально. Причина, по которой я хочу удалить {{ choice.tag }}, заключается в том, что я не хочу показывать радиокнопки, а вместо этого выбираю карточки/значения, выделяя цветом мой select.

Любая помощь будет оценена по достоинству!

Вернуться на верх