Как отправить форму через js
Перейти к содержимому

Как отправить форму через js

  • автор:

Отправка форм в JavaScript

Вы уже умеете работать с элементами форм на JavaScript, обрабатывая их в браузере. Формы, однако, можно также отправлять на сервер, чтобы их обработала серверная часть сайта, написанная на PHP или NodeJS.

Это нужно для того, чтобы добавлять и изменять данные сайта, хранящиеся на сервере.

Давайте посмотрим, как это делается. Пусть у нас есть несколько инпутов и кнопка:

Обернем наши элементы в тег form . В этом случае у нас получится форма, которая по нажатию на кнопку будет отправляться на сервер:

Чтобы на сервере можно было получить данные формы, необходимо каждому инпуту дать свое имя:

В этом случае на сервер данные формы придут в виде пар ключ-значение , где ключами будут имена элементов формы, а значениями — введенные данные.

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

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

Давайте разместим нашу форму в некотором файле так, чтобы она была доступна по адресу http://localhost:3001/form.html :

Добавим нашей форме атрибут action , указывающий адрес отправки нашей формы:

Теперь в файле server.js напишем обработчик адреса отправки формы:

export default < '/handler/': function() < return 'form data received'; >>

В параметр нашего обработчика попадут отправленные данные формы:

export default < '/handler/': function(data) < console.log(data); // выведется в консоль сервера return 'form data received'; >>

Создайте форму и файл для ее обработки. Отправьте форму и проверьте, что данные действительно пришли на сервер.

submit

Событие submit возникает, когда пользователь отправляет валидную форму. Если форма невалидна и её нельзя отправить, то и submit не будет.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

На submit можно подписаться и отреагировать, например, сказать спасибо:

 document.addEventListener('submit', function ()  alert('Спасибо, что заполнили форму!')>) document.addEventListener('submit', function ()  alert('Спасибо, что заполнили форму!') >)      

Как понять

Скопировать ссылку «Как понять» Скопировано

Пользователь может отправить форму (и создать для нас событие submit ) разными способами. Например, нажать клавишу Enter внутри поля или кликнуть по кнопке .

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

         div> form> label for="input-field">Нажмите Enter в поле:label> input id="input-field" type="text"> form> div> div> button>Или кликните тутbutton> div>      
 document.addEventListener('submit', function ()  alert('Случился submit')>) document.addEventListener('submit', function ()  alert('Случился submit') >)      

На практике

Скопировать ссылку «На практике» Скопировано

Алексей Никитченко советует

Скопировать ссылку «Алексей Никитченко советует» Скопировано

�� За отправкой формы лучше всегда наблюдать через подписку именно на событие submit .

Это удобнее и правильнее, ведь submit связан сразу с каждым элементом формы, а пользователь может отправить её разными способами. Например, нажать на клавишу Enter в поле ввода и не трогать вовсе красивую кнопку подтверждения. В то же время подписка на другие события, например на click по кнопке, будет лишь косвенно связано с отправкой формы.

В примере ниже подпишемся на событие click по кнопке формы и выведем сообщение с названием элемента, на котором сработает click . Попробуйте нажать Enter внутри поля ввода ⌨️.

 const button = document.getElementById('submit-button') button.addEventListener('click', function (event)  alert(`Событие поймано на $`)>) const button = document.getElementById('submit-button') button.addEventListener('click', function (event)  alert(`Событие поймано на $event.currentTarget>`) >)      

Хотя мы не трогаем кнопку, событие click на ней всё равно возникает. При отправке формы браузер «синтетически» кликает по кнопке на случай, если какое-то действие привязано к ней, а не к submit . Но выходит мы работаем с одним элементом, а событие возникает на другом.

Иначе с submit — мы точно работаем с формой в целом вместо отдельных элементов и улучшаем доступность для пользователей без мыши.

FormData

В этой главе речь пойдёт об отправке HTML-форм: с файлами и без, с дополнительными полями и так далее. Объекты FormData помогут нам с этим. Как вы, наверняка, догадались по его названию, это объект, представляющий данные HTML формы.

let formData = new FormData([form]);

Если передать в конструктор элемент HTML-формы form , то создаваемый объект автоматически прочитает из неё поля.

Его особенность заключается в том, что методы для работы с сетью, например fetch , позволяют указать объект FormData в свойстве тела запроса body .

Он будет соответствующим образом закодирован и отправлен с заголовком Content-Type: multipart/form-data .

То есть, для сервера это выглядит как обычная отправка формы.

Отправка простой формы

Давайте сначала отправим простую форму.

Как вы видите, код очень компактный:

    

В этом примере серверный код не представлен, он за рамками этой статьи, он принимает POST-запрос с данными формы и отвечает сообщением «Пользователь сохранён».

Методы объекта FormData

С помощью указанных ниже методов мы можем изменять поля в объекте FormData :

  • formData.append(name, value) – добавляет к объекту поле с именем name и значением value ,
  • formData.append(name, blob, fileName) – добавляет поле, как будто в форме имеется элемент , третий аргумент fileName устанавливает имя файла (не имя поля формы), как будто это имя из файловой системы пользователя,
  • formData.delete(name) – удаляет поле с заданным именем name ,
  • formData.get(name) – получает значение поля с именем name ,
  • formData.has(name) – если существует поле с именем name , то возвращает true , иначе false

Технически форма может иметь много полей с одним и тем же именем name , поэтому несколько вызовов append добавят несколько полей с одинаковыми именами.

Ещё существует метод set , его синтаксис такой же, как у append . Разница в том, что .set удаляет все уже имеющиеся поля с именем name и только затем добавляет новое. То есть этот метод гарантирует, что будет существовать только одно поле с именем name , в остальном он аналогичен .append :

  • formData.set(name, value) ,
  • formData.set(name, blob, fileName) .

Поля объекта formData можно перебирать, используя цикл for..of :

let formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Список пар ключ/значение for(let [name, value] of formData) < alert(`$= $`); // key1=value1, потом key2=value2 >

Отправка формы с файлом

Объекты FormData всегда отсылаются с заголовком Content-Type: multipart/form-data , этот способ кодировки позволяет отсылать файлы. Таким образом, поля тоже отправляются, как это и происходит в случае обычной формы.

Пример такой формы:

 Картинка:   

Отправка формы с Blob-данными

Ранее в главе Fetch мы видели, что очень легко отправить динамически сгенерированные бинарные данные в формате Blob . Мы можем явно передать её в параметр body запроса fetch .

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

Кроме того, серверы часто настроены на приём именно форм, а не просто бинарных данных.

В примере ниже посылается изображение из и ещё несколько полей, как форма, используя FormData :

    

Пожалуйста, обратите внимание на то, как добавляется изображение Blob :

formData.append("image", imageBlob, "image.png");

Это как если бы в форме был элемент и пользователь прикрепил бы файл с именем «image.png» (3-й аргумент) и данными imageBlob (2-й аргумент) из своей файловой системы.

Сервер прочитает и данные и файл, точно так же, как если бы это была обычная отправка формы.

Итого

Объекты FormData используются, чтобы взять данные из HTML-формы и отправить их с помощью fetch или другого метода для работы с сетью.

Мы можем создать такой объект уже с данными, передав в конструктор HTML-форму – new FormData(form) , или же можно создать объект вообще без формы и затем добавить к нему поля с помощью методов:

  • formData.append(name, value)
  • formData.append(name, blob, fileName)
  • formData.set(name, value)
  • formData.set(name, blob, fileName)

Отметим две особенности:

  1. Метод set удаляет предыдущие поля с таким же именем, а append – нет. В этом их единственное отличие.
  2. Чтобы послать файл, нужно использовать синтаксис с тремя аргументами, в качестве третьего как раз указывается имя файла, которое обычно, при , берётся из файловой системы.
  • formData.delete(name)
  • formData.get(name)
  • formData.has(name)

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

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

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

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

Частный вебмастер по разработке сайтов на 1С Битрикс и WordPress

Для отправки данных из формы на сервер и получения результата отправки в большинстве случаев используется 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 разметку формы и немного стилизуем

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>
/*** Форма ***/
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, но это не безопасно, потому, что скрипт грузиться в браузер и доступен всем пользователям. Поэтому, рекомендую все проверки осуществлять на сервере

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

  • 29.04.2023
  • 1333

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *