Событие `submit` формы [Модуль 8: Работа с формами]: Тренажер JavaScript: Покоряем HTML DOM

Тренажер по работе с HTML DOM на JavaScript для пользователей с начальным и средним уровнем подготовки.

В этом тренажере вы попрактикуетесь в использовании события `submit` для форм в JavaScript. Событие `submit` возникает, когда пользователь отправляет форму, обычно нажатием кнопки \"Отправить\" или клавиши Enter. Вы научитесь перехватывать это событие, предотвращать стандартное поведение браузера (перезагрузку страницы), получать данные из полей формы и выполнять с ними различные действия. Задания охватывают различные сценарии, от простой валидации до отправки данных без перезагрузки страницы. В каждом задании вам будет предоставлен HTML-код формы и часть JavaScript-кода, который вам нужно будет дополнить.

Список тем

Простое перехватывание события submit

id: 37061_submit-1

Допишите JavaScript-код так, чтобы при отправке формы (нажатии на кнопку "Отправить") стандартное поведение браузера (перезагрузка страницы) предотвращалось. В консоль должно выводиться сообщение "Форма отправлена!".

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="name" value="Иван">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <input type="text" name="name" value="Иван">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById("myForm");

form.addEventListener(input__1, (event) => {
  event.input__2();
  console.log("Форма отправлена!");
});

                     const form = document.getElementById("myForm");

form.addEventListener(input__1, (event) => {
  event.input__2();
  console.log("Форма отправлена!");
});

Используйте метод `addEventListener` для добавления обработчика события `submit` к форме. Внутри обработчика вызовите метод `preventDefault()` у объекта события, чтобы предотвратить стандартное поведение.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Получение данных из формы

id: 37061_submit-2

Дополните код так, чтобы при отправке формы в консоль выводились значения полей "name" и "email". Предотвратите стандартное поведение браузера.

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="name" value="Иван">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
</form>

<form id="myForm">
  <input type="text" name="name" value="Иван">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
</form>

JavaScript

const form = document.getElementById("myForm");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.input__1.value;
  const email = event.input__2.input__3.value;

  console.log("Имя:", name);
  console.log("Email:", email);
});

                     const form = document.getElementById("myForm");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.input__1.value;
  const email = event.input__2.input__3.value;

  console.log("Имя:", name);
  console.log("Email:", email);
});

Используйте `event.target` для доступа к форме, отправившей событие. Затем получите доступ к элементам формы по их именам (атрибут `name`) и получите их значения с помощью свойства `value`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Валидация формы

id: 37061_submit-3

Допишите код, чтобы при отправке формы проверялось, заполнено ли поле "name". Если поле пустое, выведите сообщение "Пожалуйста, введите имя" в элемент с id="error-message" и предотвратите отправку формы. Если поле заполнено, отправка формы должна быть предотвращена, а в консоль должно выводиться сообщение с введенным именем.

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="name" value="">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
  <div id="error-message"></div>
</form>

<form id="myForm">
  <input type="text" name="name" value="">
  <input type="email" name="email" value="ivan@example.com">
  <button type="submit">Отправить</button>
  <div id="error-message"></div>
</form>

JavaScript

const form = document.getElementById("myForm");
const errorMessage = document.getElementById("error-message");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.name.value;

  if (input__1 === "") {
    errorMessage.textContent = input__2;
  } else {
    console.log("Имя:", name);
  }
});

                     const form = document.getElementById("myForm");
const errorMessage = document.getElementById("error-message");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.name.value;

  if (input__1 === "") {
    errorMessage.textContent = input__2;
  } else {
    console.log("Имя:", name);
  }
});

Получите значение поля "name". Используйте условный оператор `if`, чтобы проверить, пустое ли оно. Для вывода сообщения об ошибке используйте свойство `textContent` элемента с id="error-message".

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Изменение содержимого страницы после отправки

id: 37061_submit-4

Допишите код, чтобы после отправки формы (и предотвращения стандартного поведения) содержимое элемента с id="output" менялось на "Спасибо за отправку, {имя}!", где {имя} - значение из поля "name".

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="name" value="Иван">
  <button type="submit">Отправить</button>
</form>
<div id="output"></div>

<form id="myForm">
  <input type="text" name="name" value="Иван">
  <button type="submit">Отправить</button>
</form>
<div id="output"></div>

JavaScript

const form = document.getElementById("myForm");
const output = document.getElementById("output");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.name.value;
  output.textContent = input__1;
});

                     const form = document.getElementById("myForm");
const output = document.getElementById("output");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const name = event.target.name.value;
  output.textContent = input__1;
});

Получите значение поля "name". Используйте интерполяцию строк (шаблонные строки) для создания нового текста. Присвойте этот текст свойству `textContent` элемента с id="output".

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Добавление данных в список

id: 37061_submit-5

Допишите код, чтобы при отправке формы значение из поля "item" добавлялось в список (ul) с id="list" в виде нового элемента списка (li). Предотвратите стандартное поведение браузера.

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="text" name="item" value="Новый элемент">
  <button type="submit">Добавить</button>
</form>
<ul id="list"></ul>

<form id="myForm">
  <input type="text" name="item" value="Новый элемент">
  <button type="submit">Добавить</button>
</form>
<ul id="list"></ul>

JavaScript

const form = document.getElementById("myForm");
const list = document.getElementById("list");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const newItemText = event.target.item.value;
  const newItem = document.input__1(input__2);
  newItem.textContent = newItemText;
  list.input__3(newItem);
});

                     const form = document.getElementById("myForm");
const list = document.getElementById("list");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const newItemText = event.target.item.value;
  const newItem = document.input__1(input__2);
  newItem.textContent = newItemText;
  list.input__3(newItem);
});

Создайте новый элемент `li` с помощью `document.createElement('li')`. Присвойте свойству `textContent` нового элемента значение поля "item". Добавьте новый элемент в список с помощью метода `appendChild()`.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Условное отображение содержимого

id: 37061_submit-6

Допишите код, чтобы при отправке формы, если значение поля "age" больше или равно 18, в элементе с id="message" отображался текст "Совершеннолетний", иначе - "Несовершеннолетний". Стандартное поведение браузера должно быть предотвращено.

HTML

Восстановить HTML

                      <form id="myForm">
  <input type="number" name="age" value="20">
  <button type="submit">Проверить</button>
</form>
<div id="message"></div>

<form id="myForm">
  <input type="number" name="age" value="20">
  <button type="submit">Проверить</button>
</form>
<div id="message"></div>

JavaScript

const form = document.getElementById("myForm");
const message = document.getElementById("message");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const age = Number(event.target.age.value);

  if (age input__1 18) {
    message.textContent = "Совершеннолетний";
  } input__2 {
    message.textContent = "Несовершеннолетний";
  }
});

                     const form = document.getElementById("myForm");
const message = document.getElementById("message");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  const age = Number(event.target.age.value);

  if (age input__1 18) {
    message.textContent = "Совершеннолетний";
  } input__2 {
    message.textContent = "Несовершеннолетний";
  }
});

Получите значение поля "age", приведите его к числу с помощью `Number()`. Используйте условный оператор `if/else` для проверки возраста. Присвойте соответствующий текст свойству `textContent` элемента с id="message".

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Изменение класса элемента

id: 37061_submit-7

Допишите код, чтобы при отправке формы элементу с id="myDiv" добавлялся класс "submitted", если он отсутствует, или удалялся, если он присутствует. Предотвратите стандартное поведение браузера.

HTML

Восстановить HTML

                      <form id="myForm">
  <button type="submit">Изменить класс</button>
</form>
<div id="myDiv"></div>

<form id="myForm">
  <button type="submit">Изменить класс</button>
</form>
<div id="myDiv"></div>

JavaScript

const form = document.getElementById("myForm");
const myDiv = document.getElementById("myDiv");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  myDiv.classList.input__1("submitted");
});

                     const form = document.getElementById("myForm");
const myDiv = document.getElementById("myDiv");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  myDiv.classList.input__1("submitted");
});

Используйте свойство `classList` и его метод `toggle()` для добавления/удаления класса.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Отображение/скрытие элемента

id: 37061_submit-8

Допишите код, чтобы при отправке формы, если чекбокс с id="show" отмечен, элемент с id="secret" становился видимым (добавлялся класс "visible"), иначе - скрывался (класс "visible" удалялся). Предотвратите стандартное поведение браузера. CSS-класс "visible" уже определен в стилях.

HTML

Восстановить HTML

                      <style>
.visible {
  display: block;
}
</style>
<form id="myForm">
  <input type="checkbox" id="show" name="show">
  <label for="show">Показать секрет</label>
  <button type="submit">Отправить</button>
</form>
<div id="secret" style="display: none;">Секретный контент</div>

<style>
.visible {
  display: block;
}
</style>
<form id="myForm">
  <input type="checkbox" id="show" name="show">
  <label for="show">Показать секрет</label>
  <button type="submit">Отправить</button>
</form>
<div id="secret" style="display: none;">Секретный контент</div>

JavaScript

const form = document.getElementById("myForm");
const secret = document.getElementById("secret");
const showCheckbox = document.getElementById("show");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  if (showCheckbox.input__1) {
    secret.classList.add("visible");
  } else {
    secret.classList.input__2("visible");
  }
});

                     const form = document.getElementById("myForm");
const secret = document.getElementById("secret");
const showCheckbox = document.getElementById("show");

form.addEventListener("submit", (event) => {
  event.preventDefault();

  if (showCheckbox.input__1) {
    secret.classList.add("visible");
  } else {
    secret.classList.input__2("visible");
  }
});

Получите состояние чекбокса с помощью свойства `checked`. Используйте условный оператор `if/else` и методы `add()` и `remove()` свойства `classList` для управления классом "visible".

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку

Изменение изображения

id: 37061_submit-9

Допишите код, чтобы при отправке формы, если в поле "imageNumber" введено число 1, 2, 3 или 4, то у элемента `img` с id="myImage" менялся атрибут `src` на соответствующую картинку (используйте предоставленные URL). Если введено другое число, то в элемент с id="imageMessage" выводилось сообщение "Введите число от 1 до 4". Предотвратите стандартное поведение.

HTML

Восстановить HTML

                      <form id="myForm">
 <input type="number" name="imageNumber" value="1">
 <button type="submit">Сменить картинку</button>
</form>
<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" width="150">
<div id="imageMessage"></div>

<form id="myForm">
 <input type="number" name="imageNumber" value="1">
 <button type="submit">Сменить картинку</button>
</form>
<img id="myImage" src="https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png" width="150">
<div id="imageMessage"></div>

JavaScript

const form = document.getElementById("myForm");
const myImage = document.getElementById("myImage");
const imageMessage = document.getElementById("imageMessage");

const imageUrls = [
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png"
];

form.addEventListener("submit", (event) => {
 event.preventDefault();

 const imageNumber = Number(event.target.imageNumber.value);

 imageMessage.textContent = "";

 if (imageNumber >= 1 && imageNumber <= 4) {
 myImage.src = imageUrls[imageNumber input__1 1];
 } else {
 imageMessage.textContent = input__2;
 }
});

                     const form = document.getElementById("myForm");
const myImage = document.getElementById("myImage");
const imageMessage = document.getElementById("imageMessage");

const imageUrls = [
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike2-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike3-300x300.png",
 "https://naytikurs.ru/assets/uploads/2025/03/3d-modelirovanie-i-vizualizatsiya-test-dlya-spetsialistov-v-trehmernoj-grafike4-300x300.png"
];

form.addEventListener("submit", (event) => {
 event.preventDefault();

 const imageNumber = Number(event.target.imageNumber.value);

 imageMessage.textContent = "";

 if (imageNumber >= 1 && imageNumber <= 4) {
 myImage.src = imageUrls[imageNumber input__1 1];
 } else {
 imageMessage.textContent = input__2;
 }
});

Получите значение поля "imageNumber". Используйте условный оператор (можно `switch/case` или `if/else if/else`) для проверки введенного числа и изменения атрибута `src` у изображения.

Заполнить ответами все поля

Результат

Лог

Выполнить

Показать подсказку