Урок: сохранить несколько значений одного имени поля

Назначение

Группа выбранных чекбоксов может отправлять несколько значений с одинаковым именем. Простое превращение FormData в объект теряет повторы, поэтому нужно заранее выбрать подходящее представление данных.

Как это работает

Создайте локальную форму id topics с двумя отмеченными чекбоксами name="topic" и значениями html и css. Пример подключается после формы и сравнивает полный список с результатом Object.fromEntries.

Пример

const form = document.querySelector("#topics");
const data = new FormData(form);
console.log("Все темы:", data.getAll("topic"));
console.log("Обычный объект:", Object.fromEntries(data));
const payload = {topics:data.getAll("topic")};
console.log(JSON.stringify(payload));

Что должно получиться

GetAll сохраняет оба значения в порядке формы. Обычный объект содержит только одно значение одинакового ключа, а явное поле topics позволяет сериализовать массив в JSON без потери выбора.

Граница применения и частая ошибка

Неотмеченные чекбоксы и disabled-поля не включаются как обычные успешные элементы формы. FormData также может содержать файлы, для которых простая JSON-сериализация не подходит. Сервер должен проверять допустимые значения и их количество.

Самостоятельная проверка

Снимите обе отметки и повторите чтение: ожидается пустой массив. Затем оставьте одну и сравните результат. Добавьте постороннее значение в учебной копии и объясните, почему сервер не должен доверять списку только из-за формы.

Связанные материалы

• Диагностика в консоли
• Прототип формы
• Повторные проверки