Отправка формы при клике по ссылке с помощью JavaScript

Быстрый ответ

Для осуществления отправки формы через клик по ссылке необходимо предотвратить стандартное поведение и активировать метод submit() для определённой формы:

<a href="javascript:void(0);" id="submit-link">Отправить</a>
<form id="form-to-submit">
  <!-- Поля формы -->
</form>

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('submit-link').addEventListener('click', function(event) {
    event.preventDefault(); // Прерываем выполнение стандартного действия
    document.getElementById('form-to-submit').submit(); // Инициируем отправку формы
  });
});

Обратите внимание на совместимость с различными браузерами и возможность возникновения конфликтов с другими скриптами на странице.

Улучшаем уровень доступности

Ссылка, визуально стилизованная, может стать причиной проблем с доступностью. Проверьте, чтобы ваша форма была приемлема для всех пользователей. Элементам input и select всегда требуются ярлыки, в то время как у ссылки может потребоваться роль кнопки:

<a href="javascript:void(0);" id="submit-link" role="button">Отправить</a>

Для того, чтобы кнопка выглядела как ссылка и наоборот, можете использовать элемент button с соответствующими стилями:

<button type="submit" id="submit-button" style="appearance: none; background: none; border: none;">
  Отправить
</button>

Решаем сложные задачи

Формы с несколькими слушателями событий

Если у формы несколько обработчиков события submit, они должны правильно взаимодействовать. В некоторых случаях решением может быть добавление скрытой кнопки отправки:

<form id="form-to-submit">
  <input type="submit" style="display: none;" />
</form>

document.getElementById('submit-link').addEventListener('click', function() {
  document.getElementById('form-to-submit').querySelector('[type="submit"]').click(); // Инициируем клик кнопки отправки
});

Подробнее об этом расскажет наш спикер на видео

Совместимость с JavaScript и фреймворками

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

// Проверяем, готов ли jQuery
$(document).ready(function() {
  $('#submit-link').click(function(e) {
    e.preventDefault();
    $(this).closest('form').submit(); 
  });
});

Визуализация

Кликаете по ссылке (🔗), что запускает JavaScript функцию. И вот она — форма отправлена (🎯):

document.querySelector('#myLink').addEventListener('click', function() {
   document.querySelector('#myForm').submit();
});

Успешное выполнение! 🎉

Ваше действие: 🔗✔️
Отправка формы: 🎯✔️

Оформление и стиль ссылки

Ссылка для отправки формы должна гармонировать со стилем страницы. Можно использовать CSS для добавления эффектов:

#submit-link:hover {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

Обратная связь после отправки

После отправки формы важно сообщить пользователю о состоянии его запроса, используя сообщение или анимацию:

Полезные материалы

1. HTMLFormElement: метод submit() – Веб-API | MDN – Руководство MDN по использованию submit().
2. Как имитировать нажатие кнопки по нажатию Enter – Интерактивность с клавиатурой.
3. FormData – Работа с FormData для AJAX.
4. JavaScript post request like a form submit – Stack Overflow – Обсуждение отправки форм при помощи JavaScript.
5. Правильное использование элемента button | CSS-Tricks – Преимущества использования элемента <button>.
6. Элемент: событие click – Веб-API | MDN – Анализ события клика в JS.
7. HTML Стандарт – Официальные стандарты HTML для элементов форм.