Простая форма отправки данных на JS

13.04.2024
3582

Разделы

Я не претендую на право называться автором всей размещенной здесь информации, так как некоторые моменты были заимствованы в доступных источниках и немного переработаны для удобства пользования.

По возможности указываю ссылки на источники.

Копируйте, комментируйте, переделывайте, пользуйтесь. Кому не жалко, оставляйте ссылку на источник.

Для отправки данных из формы на сервер и получения результата отправки в большинстве случаев используется AJAX. Применять AJAX не будем, так как для работы ему требуется подключение библиотеки Jquery, а нам он не нужен.

Всеми современными браузерами поддерживается метод fetch(), который в данном посте я применю для реализации отправки данных и получения ответа. Синтаксис метода fetch(), не сложный и выглядит следующим образом:

let promise = fetch(url, [options]);

url – путь для отправки запроса.
options – дополнительные параметры: метод, заголовки и так далее.

В опциях укажем method равный POST и body, что является телом запроса. Для отправки POST-запроса, этого достаточно.

const response = await fetch(url, {
    method: "POST",
    body: data
});

Для начала напишем HTML разметку формы и немного стилизуем

HTML

<div class="form-block">
    <h1>Форма связи</h1>
    <form id="form">
        <input class="clean" type="text" name="name" placeholder="Имя">
        <input class="clean" type="email" name="email" placeholder="Email *">
        <textarea class="clean" rows="3" name="text" placeholder="Текст сообщения"></textarea>
        <button name="send" type="submit">Отправить</button>
    </form>
</div>

SCSS

/*** Форма ***/h1 {
  font-size: 50px;
  line-height: 150%;
  margin-bottom: 20px;
  text-align: center;
}
form {
  display: flex;
  flex-direction: column;
}
input, textarea {
  border: 1px black solid;
  margin-bottom: 20px;
  padding: 5px 15px;
  font-size: 18px;
  line-height: 150%;
  border-radius: 5px;
  max-width: 100%;
}
button {
  width: 150px;
  height: 45px;
  border-radius: 5px;
  font-size: 18px;
}

Далее в файле js приступаем к созданию функции, которую можно применить для других обращений к серверу.

// Функция отправки формы fetch
async function postData(url= '', data = {}) {
    const response = await fetch(url, {
        method: "POST",
        body: data
    });
    return await  response.json();
}

Отправка данных и обработка ответа на js

// отправка
let form = document.getElementById('form'); // переменная с формой
// при отправке формы любым способом
form.addEventListener('submit', function (event) {
    // запрещаем стандартное действие
    event.preventDefault();
    // создаем объект новый
    let data = new FormData(form);
    // передаем в фукцию fetch данные и получаем результат
    postData('send.php', data).then((data) => {
        // обработка ответа от сервера
        console.log(data);
        if (data.error == '') {
            alert(data.success);
            cleanForm();
        } else if (data.email !== '') {
            alert(data.email);
        } else {
            alert(data.error);
        }
    })
})

Обработка данных на стороне сервера и возвращение ответа в формате json. Здесь реализовали небольшую проверку на на наличие информации в передаваемых значениях и стандартную валидацию адреса электронной почты. Варианты отправки рассмотрим в следующий раз

/***   Получаем данные из формы отправленные скриптом ***/
// перед присвоением в переменную, проверяем есть ли данные
if (!empty($_POST["name"])) $name = $_POST['name'];
if (!empty($_POST["email"])) $email = $_POST['email'];
if (!empty($_POST["text"])) $text = $_POST['text'];

/***   Проверка данных ***/
// валидация почты
$OK = false;
if (filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $OK = true;
} else {
    $OK = false;
    $result['email'] = 'Неверный адрес электронной почты';
}

/***   Отправка данных ***/
if ($OK) {
    // отправка
   
    // если отправка успешна
    $result['error'] = "";
    $result['success'] = 'Сообщение отправлено';
} else {
    $result['error'] = 'Сообщение не отправлено';
}

/***   Возврат результата отправки ***/
header('Content-Type: application/json');
echo json_encode($result);

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

Готовую форму можно скачать по ссылке

Простая форма отправки данных на JS

Комментарии