• Теория
  • Теория

Событие «submit»

Мы справились с показом сообщения. Теперь разберёмся с добавлением задачи:

  • задача считается выполненной и исчезает, если юзер кликнул по чекбоксу;
  • если все задачи выполнены, появляется сообщение, что больше задач нет;
  • если в пустой список добавляется новая задача, сообщение исчезает;
  • чтобы добавить новую задачу, надо ввести описание в поле ввода и нажать «Добавить задачу», задача появится в конце списка.

Задача добавляется через форму, которая состоит из поля ввода и кнопки. Пользователь должен написать текст задачи, а затем кликнуть по кнопке и задача добавится в список. Но сама она не добавится, придётся ей помочь.

Заглянем в разметку. Атрибут у кнопки внутри формы submit, значит, клик по ней вызовет отправку данных из формы на сервер.

Для добавления задачи можно ловить клики по этой кнопке, но универсальней будет использовать специальное событие submit. Оно срабатывает всегда при отправке формы. Это событие универсально потому, что иногда форму можно отправить не только кликом по кнопке, но и нажатием какой-то клавиши. Например, «Enter».

Найдём форму в разметке, добавим ей обработчик события submit и убедимся, что событие срабатывает.

Пользователь может попробовать отправить форму, не заполняя поле. Обычно, чтобы форма не отправилась «пустой», проверяют содержимое полей этой формы. Но мы так делать не будем. Наш верстальщик добавил полю атрибут required. Он делает ввод текста в поле обязательным. Событие отправки формы сработает только когда в этом поле будет какая-то строка.

Лайв ««Вы всё врёте!» — Есть ли смысл идти в айти в 2024?»

Записывайтесь на трансляцию 16 мая в 13:00

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Манипуляции с DOM» тренажёра «Погружение в браузерный JavaScript» можно после регистрации и оформления подписки.