</> Praktum

Главная / JavaScript / Чтение формы

Урок 15 · JavaScript

Берём значения полей и не теряем их при Enter

Событие submit вешают на форму, а не click на кнопку. Тогда сработает и щелчок, и Enter.

Почему это следующий шаг

Кнопка уже считает клики. Форма должна забрать имя и показать ответ на странице.

Как сделать

preventDefault отменяет перезагрузку, если ответ нужно показать здесь. FormData достаёт поля по имени name. Перед использованием обрежь пробелы. Пустое имя — это текст ошибки, а не «успех». Не очищай форму, пока не понял, что значение прочитано.

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const name = String(data.get("name") || "").trim();
  status.textContent = name ? `Здравствуйте, ${name}` : "Введите имя";
});

Что проверить

  • Enter в поле не обходит твой код.
  • Пустое имя показывает ошибку.
  • У поля есть name, иначе FormData его не увидит.

Попробуй

Сделай форму имени, которая пишет приветствие или просит заполнить поле.

Практикумы по теме