HTML
Создаем форму:
<form action=”https://private-c4cefc-codepenvf.apiary-mock.com/sendform">
<input name=”message” placeholder=”Message” required>
<button>Send</button>
</form>
Я использую сервис apiary чтобы сформировать ответ от сервера в формате JSON:
{
"success": "true",
"message": "The form has been sent!"
}
JavaScript
Находим все, что нам нужно и добавляем слушатель:
let form;
let action;
function findElements() {
form = document.querySelector('form');
({ action } = form);
}
function subscribe() {
form.addEventListener('submit', onSubmit);
}
function init() {
findElements();
subscribe();
}
init();
При отправке формы:
function onSubmit(event) {
event.preventDefault();
const { currentTarget } = event;
sendForm(currentTarget)
.then(response => onSuccess(response, currentTarget))
.catch(onError);
}
— Отключаем стандартное поведение через preventDefault;
— Отправляем форму;
— При успехе вызываем функцию onSuccess;
— Иначе onError.
Отправляем форму
В основе лежит fetch:
function collectData(currentForm) {
const data = new FormData(currentForm);
return data;
}
function setOptions(currentForm) {
return {
method: 'post',
body: collectData(currentForm),
};
}
function sendForm(currentForm) {
return fetch(action, setOptions(currentForm));
}
Первый аргумент — url, по которому нужно обратиться;
Второй — объект, который с данными.
При успехе вызываем функцию onSuccess
function showMessage(data) {
alert(data.message);
}
function onSuccess(response) {
return response.json().then(showMessage);
}
Fetch возвращает Promise, поэтому сначала получаем json, потом вызываем функцию showMessage.
Дабы упростить пример — я вывожу сообщение в alert.
При ошибке вызываем функцию onError
function onError(data) {
console.error(data);
}
В onError, вызванный через catch, уже попадет аргумент с информацией об ошибке.
Полный код
let form;
let action;
function findElements() {
form = document.querySelector('form');
({ action } = form);
}
function showMessage(data) {
alert(data.message);
}
function onSuccess(response) {
return response.json().then(showMessage);
}
function onError(data) {
console.error(data);
}
function collectData(currentForm) {
const data = new FormData(currentForm);
return data;
}
function setOptions(currentForm) {
return {
method: 'post',
body: collectData(currentForm),
};
}
function sendForm(currentForm) {
return fetch(action, setOptions(currentForm));
}
function onSubmit(event) {
event.preventDefault();
const { currentTarget } = event;
sendForm(currentTarget)
.then(response => onSuccess(response, currentTarget))
.catch(onError);
}
function subscribe() {
form.addEventListener('submit', onSubmit);
}
function init() {
findElements();
subscribe();
}
init();
В удобочитаем виде — на codepen.
Посты на эти и другие темы публикую в канале: https://t.me/filimonovvadim
