Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг Управление проектами
17 Апр 2023
2 мин
363

Как предотвратить отправку формы кнопками

Проблема, с которой часто сталкиваются начинающие разработчики, особенно те, кто работает с JavaScript и формами HTML, это случайная отправка формы при нажатии

Проблема, с которой часто сталкиваются начинающие разработчики, особенно те, кто работает с JavaScript и формами HTML, это случайная отправка формы при нажатии на кнопку. У такой проблемы есть множество причин и вариантов решения, но рассмотрим одну из наиболее типичных ситуаций.

Представим, что у нас есть форма, в которой есть несколько полей для ввода и две кнопки. Одна кнопка предназначена для добавления новых полей в форму, а другая — для удаления последнего добавленного поля. Код формы может выглядеть примерно так:

<form action="submit_form.php" method="post">
  <input type="text" name="field1" />
  <input type="text" name="field2" />
  <button id="add">Добавить поле</button>
  <button id="remove">Удалить последнее поле</button>
  <input type="submit" value="Отправить форму" />
</form>

В этом примере кнопки «Добавить поле» и «Удалить последнее поле» могут вызывать отправку формы, так как по умолчанию кнопки внутри формы ведут себя как кнопки отправки. Но мы хотим, чтобы эти кнопки выполняли только свои функции — добавление и удаление полей, без отправки формы.

Для этого мы можем использовать JavaScript (или jQuery) для предотвращения действия по умолчанию кнопки, которое инициирует отправку формы. В нашем случае нам нужно предотвратить действие по умолчанию для кнопок «Добавить поле» и «Удалить последнее поле».

Вот пример кода на JavaScript, который предотвращает отправку формы при нажатии на кнопки «Добавить поле» и «Удалить последнее поле»:

document.getElementById('add').addEventListener('click', function(event) {
  event.preventDefault();
  // Код для добавления поля...
});

document.getElementById('remove').addEventListener('click', function(event) {
  event.preventDefault();
  // Код для удаления поля...
});

В этом коде мы используем event.preventDefault(); чтобы предотвратить действие по умолчанию кнопки, то есть отправку формы. Вместо этого кнопки выполняют только свои функции — добавление и удаление полей.

Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей

Добавить комментарий