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


Содержание

Форма отправки файла с сайта

Недавно, вспомнил как я когда-то работал с компанией, которая занималась производством и продажей деревянных поддонов. Нам часто звонили, яндекс директ — успешно работал и принимая звонки нередко приходилось просить выслать чертеж с размерами на почту, хотя она и висела в правом верхнем углу, над кнопкой заказать звонок.

То есть, даже если оставляли заявку, менеджер связывался с клиентом и все равно в телефонном разговоре мы либо диктовали адрес электронной почты, для того чтобы нам выслали чертеж с параметрами поддона, либо просили людей зайти на сайт и на указанную почту отправить свое письмо. Это было не очень удобно, и сегодня я решил разобраться в том, как сделать такую форму, чтобы в нее можно было загрузить файл, например, простым перетягиванием или через проводник. В общем — все как обычно.

Согласитесь, в некоторых сферах бизнеса подобная форма загрузки файла через форму была бы очень актуальна. Может быть даже в вашем, просто вы не задумывались об этом). Давайте приступим.

Форма загрузки файла для сайта

Давайте начнем с того, что нужно сделать — это создать файл index.php, так как в противном случае наша форма не будет работать. Если у кого-то уже был создан index.htm — просто измените расширение. Ничего с вашим landing page не случится. Не паникуйте :). После этого, создадим самую обычную форму, с двумя полями.

— как раз и отвечает за возможность подключать файл через стандартный загрузчик.

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

Для того, чтобы задать приятный внешний вид полю с type=»file» — придется потанцевать с бубном. В сети существует много решений, но я выбрал с использованием javascript. Я нашел такой скрипт, который задает классы для текстового поля, кнопки «Выбрать» и общего контейнера для них.

Скачивайте исходник и найдете его в папке js. Не могу дать ссылку на исходник, так как нашел его на форуме. Он очень маленький — всего 3 кб в неоптимизированном виде. Давайте подключим его (Перед закрывающимся тегом ):

Для вызова плагина воспользуемся следующей конструкцией:

Его можно расположить сразу после подключения самого скрипта.

Давайте теперь разберем классы:

  • Для управления полем в котором будет выводится имя загруженного файла теперь будем пользоваться .fileName
  • Для управления кнопкой, при нажатии на которую открывается окно загрузки — .fileBtn
  • Для управления областью, в которой находятся предыдущие 2 элемента воспользуемся .fileUpload

Для управления текстом внутри кнопки нужно открыть скрипт и в 8 строке изменить мой текст на свой :) Там есть комментарий, поэтому, кто не знаком с javascript — смело открывайте и редактируйте. Даю слово, — вы разберетесь.

Это очень удобно и развязывает руки. Теперь мы можем полностью управлять элементами, которые нас интересуют. Я решил пойти нестандартным путем и создал такой вид:

Если интересно, можете посмотреть стили в исходнике. Статья не о таблицах стилей, поэтому давайте продолжим.

С отправкой файла на почту — не так все просто, как с данными, занесенными в поля формы. Для того, чтобы грамотно обработать файл воспользуемся дополнительным php скриптом. Его нужно скачать и положить рядом с формой. Можете даже не открывать :)

Называется он class.phpmailer.php. Готово. Теперь давайте разбираться дальше. Для того, чтобы данные отправлялись к нам на почту вставьте в файл с формой (куда-нибудь в футер) следующий код:

Думаю, основные моменты — понятны, так как она прокомментированы. Да, код не идеален. Можно дописать кучу проверок и т.п. Кто пожелает — милости прошу. Заодно, — поможете остальным.

Мне больше нравится front-end. поэтому я попробую разобраться и протестировать атрибут accept для поля input=»file». Он довольно интересен, и позволяет фильтровать файлы, которые можно загружать в форму, но к сожалению, работает не во всех браузерах. Так гласят форумы :) Вот хочу протестировать самостоятельно и сделать свои выводы. Попробую на днях рассказать вам о своем эксперименте. А не сегодня — все. Надеюсь вам пригодится данная форма для отправки файлов. Пока!

Отправка данных формы: событие и метод submit

Отправка данных формы: событие и метод submit

Здравствуйте! В этом последнем уроке по работе с формами в JavaScript я хотел бы рассказать об отправке данных формы и конкретно об методе submit. Само событие submit появляется при отправке данных формы на сервер. И наиболее частое его применение – это валидация или просто проверка формы перед отправкой.

Метод submit позволяет отправить форму из JavaScript, без непосредственного участия пользователя. Далее давайте рассмотрим более детально.

Событие submit

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

  1. Первый – это просто нажать кнопку или .
  2. Второй – нажать Enter, находясь на каком-нибудь поле в форме.

Какой бы способ ни выбрал посетитель – будет сгенерировано событие submit. Обработчик в нём может проверить данные и, если они неверны, то вывести ошибку и сделать event.preventDefault() – тогда форма не отправится на сервер.

Например, в таком HTML оба способа выведут alert, форма не будет отправлена:

  1. Перейдите в текстовое поле и нажмите на клавишу Enter, будет событие, но форма не отправится на сервер благодаря return false в обработчике.
  2. То же самое произойдет при клике на .

При отправке формы путём нажатия Enter на текстовом поле, на элементе генерируется событие click.
Это довольно забавно, учитывая что клика-то и вовсе не было.

Метод submit

Чтобы отправить форму на сервер из JavaScript – нужно вызвать на элементе формы метод form.submit().

При этом само событие submit не будет происходить. Предполагается, что если вы вызываете метод form.submit(), то и все проверки тоже сделали.

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

Задания

Модальное диалоговое окно

Создайте функцию showprompt(text, callback), которая будет выводить форму для ввода с сообщением text и кнопками ОК/Отмена.

  • При отправке формы (OK/ввод в текстовом поле) – должна вызываться функция callback со значением поля.
  • При нажатии на Отмена или на клавишу Esc – должна вызываться функция callback(null). К

Проверка правильности заполнения полей формы

Напишите функцию valid(form), которая будет проверять содержимое формы по клику на кнопку «Проверить».

  1. Одно из полей не заполнено.
  2. Пароли не совпадают.

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

HTML Формы

Формы предназначены для пересылки данных от пользователя к веб-серверу. Формы в HTML могут состоять из текстовых полей и текстовых областей, флажков и переключателей, а также раскрывающихся списков. Все это — элементы формы. Каждый элемент служит для того, чтобы передать какое-либо значение сайту.
По своей сути HTML-форма — это веб-страница на которой вы видите области для ввода своей информации. После того, как вы заполните форму и нажмете кнопку отправить, информация из формы упаковывается и отсылается веб-серверу для обработки серверным сценарием (файлом-обработчиком). После обработки к вам возвращается в качестве ответа другая веб-страница. Следующий рисунок наглядно демонстрирует как работает форма:

Нет ничего сложного в создании HTML-форм. Самый простой способ получить представление о формах — это разобрать небольшой HTML-код, а затем посмотреть, как он работает. В следующем примере показан синтаксис создания простой HTML-формы:

Пример: Простая HTML-форма

Моя первая форма:
Имя:
Фамилия:

Элемент

Вместе с этим атрибутом можно использовать атрибут maxlenght, значение которого определяет максимальное количество символов, которые можно ввести в данную строку. Можно также задать длину поля ввода, используя атрибут size. По умолчанию, в большинстве браузеров ширина текстового поля ограничена 20 символами. Для управления шириной элементов новых форм, вместо атрибута size, рекомендуется использовать средства каскадных таблиц стилей (CSS).
Атрибут value задает значение, которое по умолчанию отображается в текстовом поле в момент загрузки формы. Введя в поле значение по умолчанию, можно пояснить пользователю, какие именно данные и в каком формате вы хотите, чтобы пользователь сюда занес. Это как образец, ведь пользователю гораздо удобнее заполнять форму, видя перед собой пример.

Переключатели (radio)

Элемент типа radio создает переключатели, которые используют принцип логического «ИЛИ», позволяя выбрать только одно из нескольких значений: если вы выбираете одно положение, то все остальные становятся неактивными. Основной синтаксис элемента-переключателя:

Атрибут name для переключателей обязателен и играет важную роль в объединении нескольких элементов-переключателей в группу. Для объединения переключателей в группу необходимо установить одинаковое значение атрибута name и разное значение атрибута value. Атрибут vаluе устанавливает значение выбранного переключателя, которое будет отправлено серверу. Значение каждого элемента-переключателя должно быть уникальным внутри группы, для того, чтобы сервер знал, какой вариант ответа выбрал пользователь.
Наличие атрибута checked (с англ. — установлен) у элемента-переключателя указывает на то, какой из предлагаемых вариантов должен быть выбран по умолчанию при загрузке страницы, если это необходимо. Данный атрибут может быть установлен только у одного элемента-переключателя из группы:

Пример: Использование переключателей

Сколько Вам лет?

  1. младше 18
  2. от 18 до 24
  3. от 25 до 35
  4. более 35

Флажки (checkbox)

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

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

Пример: Использование переключателей

Какие музыкальные жанры Вы любите?

Кнопки подтверждения (submit) и очистки (reset)

Элемент типа submit создает кнопку, при нажатии которой происходит отправка браузером серверному сценарию на обработку данных, введенных пользователем в форму. Если создаем кнопку, очищающую форму, то присваиваем атрибуту type значение «reset» . Элементу типа submit может быть присвоен необязательный атрибут name. Атрибут vаluе используется в данном элементе для указания текста, обозначающего надпись на кнопке. По умолчанию в браузерах на кнопке пишется «Отправить» (Submit), если вас данная надпись не устраивает — введите ее самостоятельно. Поскольку в разных браузерах стили кнопок подтверждения могут отличаться, поэтому лучше самостоятельно настроить стиль кнопки, воспользовавшись средствами CSS либо использовать графические кнопки.
Создание кнопок подтверждения и очистки:

Пример: Использование submit и reset

Подпишись на рассылку новостей:

После щелчка на кнопке Reset происходит сброс любых введенных пользователем данных.

Атрибут action.

Главным для элемента

Файл обработки находится на сервере mytestserver.com в папке namefolder и название серверного сценария, который будет обрабатывать данные — obrabotchik.php. Именно ему и будут переданы все данные, введенные вами в форму на веб-странице. Расширение .php указывает на то, что указанная форма обрабатывается сценарием написанном на языке PHР. Сам обработчик может быть написан на другом языке, например это может быть язык сценариев Python, Ruby и др.
Желательно всегда задавать значение атрибута action. Если форма должна передать значения на ту же страницу, где она расположена в качестве значения атрибута action укажите пустую строку: action=»».

Атрибут method

Атрибут method задает то, каким образом информация должна быть передана на сервер. Выбор метода отправки формы зависит от данных, которые необходимо отправить вместе с ней. Здесь основную роль играет объем этих данных. Наиболее популярными являются два метода передачи исходных данных вашей формы из браузера на сервер: GET и POST. Метод устанавливается любой на выбор, и если вы его не указали, по умолчанию будет использоваться GET. Рассмотрим применение каждого из них.

Метод POST

Метод POST упаковывает данные формы и отсылает их серверу незаметно для пользователя, поскольку данные содержатся в теле сообщения. Веб-браузер, при использовании метода POST отправляет на сервер запрос, состоящий из специальных заголовков за которыми следуют данные формы. Так как содержимое этого запроса доступно только серверу, метод POST применяется для передачи конфиденциальных данных, таких как пароли, реквизиты банковских карт и другая персональная информация пользователей. Метод POST также подходит для отправки больших объемов информации, так как в отличие от метода GET, у него нет ограничений по количеству передаваемых символов.

Метод GET

Как вы уже знаете основная работа браузера — это получать веб-страницы от сервера. Так вот, когда вы используете метод GET, ваш браузер просто получает веб-страницу, как делает это всегда. Метод GET также упаковывает данные формы, но, прежде чем отправить запрос серверу, присоединяет их в конец URL-адреса. Чтобы понять, как работает метод GET, давайте посмотрим его в действии. Откройте в блокноте (например Notepad++) первый пример из этого урока (Пример: Простая HTML-форма) и внесите в HTML-код небольшое изменение:

Элемент-переключатель

Добавьте нужные элементы в HTML-код, чтобы в результате получилась форма, приведенная в задании. В качестве имени для всех элементов установите name=»genre», а значения (value) соответственно: «rock», «pop» и «jazz».

Однострочное поле ввода текста

Добавьте нужные элементы в HTML-код, чтобы в результате получилась форма, приведенная в задании. В качестве имени (name) текстовых полей установите по порядку:»firstname», «lastname» и «login».

Значения по умолчанию

Для текстовых полей, приведенных в форме добавьте значения по умолчанию соответственно: «Ваше имя», «Ваша фамилия» и «до 10 знаков» как показано в задании.

Кнопки отправки данных и сброса

Разместите кнопки отправки данных и сброса в нижней части формы. По умолчанию на кнопке отправки данных отобразите надпись «Отправить запрос», а на кнопке сброса «Начать заново».

Как отправить HTML-форму без перезагрузки страницы

Что такое AJAX

При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.

Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.

Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи Ajax

Здесь мы создадим демо-проект, который будет включать в себя 3 файла:

index.php — это главная страница, на которой размещена сама форма

ajax.js — это файл javascript, в котором содержится алгоритм ajax для обработки формы

action_ajax_form.php — это серверная часть, которая отвечает за обработку полученных от формы данных и возвращает клиенту ответ в формате JSON

Создайте первый файл под названием index.php с таким содержимым:

Мы подключим библиотеку jQuery и создали базовую HTML-разметку, а также подключили файл ajax.js, далее нам нужно будет создать этот файл.

Обратите внимание, что метод отправки формы у нас POST, задан . Также, после формы мы добавили div c >

Теперь создадим второй файл — ajax.js

В файле ajax.js есть два метода: $(«#btn»).click и sendAjaxForm. Первый метод — это слушатель событий кнопки. То есть, когда мы нажимаем на кнопку «Отправить», слушатель срабатывает и вызывает метод sendAjaxForm.

В метод sendAjaxForm(result_form, ajax_form, url) передаются поля: result_form — это div в который будут рендерится данные, ajax_form — это id формы отправки сообщения и url — это местоположение файла action_ajax_form.php который отвечает за серверную часть (обработка формы).

Создадим последний файл — action_ajax_form.php

action_ajax_form.php — это обработчик формы на стороне сервера. Этот файл отвечает за backend часть нашего мини-приложения. Для примера, мы делаем проверку: Если существуют переменные в POST запросе name и phonenumber, тогда мы формируем массив $result для JSON ответа от сервера. Затем, массив $result мы переводим в JSON объект, чтобы клиент ajax.js смог корректно получить данные в формате JSON.

Выводы


Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с AJAX, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.

HTML формы

Форма в HTML это часть документа, которая позволяет пользователю ввести интересующую нас информацию, которую впоследствии можно принять и обработать на стороне сервера. Другими словами, формы используются для сбора информации введённой пользователями.

Синтаксически парный тег

Элемент является основным элементом формы и определяет пользовательское поле для ввода информации. Поле ввода принимает различный вид, в зависимости от значения атрибута type, применённого к данному элементу:

Значение Описание
button Определяет кнопку. Как правило, используется в основном совместно с языком программирования JavaScript для активации скрипта.
checkbox
включено
выключено
Элемент графического пользовательского интерфейса, позволяющий пользователю управлять параметром с двумя состояниями — ☑ включено и ☐ выключено. Элемент также называют флажок, флаговая кнопка, чекбокс, галочка.
color Элемент управления для задания цвета (определяет палитру цветов).
date Элемент управления для ввода даты в формате DD.MM.YYYY (день, месяц и год). В элементе не указывается время.
datetime-local Элемент управления для ввода даты в формате DD.MM.YYYYThh:mm (день, месяц, год, часы и минуты). В элементе не указывается часовой пояс.
email Определяет поле для ввода адреса электронной почты.
file Элемент управления, который позволяет пользователю выбрать файл.
hidden Элемент управления, который определяет скрытое поле ввода.
image Элемент управления, который определяет графическую кнопку «отправить форму» (значение submit ). По аналогии с тегом вы должны использовать атрибут src, чтобы задать путь к изображению и атрибут alt, чтобы указать альтернативный текст, если изображение не будет загружено по каким-то причинам. Размеры изображения задаются атрибутами width (ширина) и height (высота).
month Элемент управления для ввода месяца и года (Month YYYY). В элементе не указывается часовой пояс.
number Элемент управления для ввода числа с плавающей точкой.
password Определяет однострочное текстовое поле, предназначенное для ввода пароля (символы, введенные внутри поля скрываются). Используйте атрибут maxlength HTML тега , чтобы задать максимальную длину значения, которое может быть введено в поле.
radio
выбрано
не выбрано
Элемент графического пользовательского интерфейса, который позволяет пользователю выбрать одно значение из предопределенной группы значений. Элемент, как правило, называют радиокнопка ( radio button) или переключатель.
range Элемент управления для ввода номера (регулятор), в котором ввод точного значения не является важным. Этот тип управления использует следующие значения по умолчанию, если атрибуты не указаны:
  • min = «0»
  • max = «100»
  • value = min + (max — min) / 2 , или min (если max меньше чем min )
  • step = «1»
reset Определяет кнопку сброса содержимого формы до значений, установленных по умолчанию.
search Определяет однострочное текстовое поле для ввода строки поиска
submit Определяет кнопку отправки формы
tel Определяет элемент управления для ввода телефонного номера.
text Определяет однострочное текстовое поле (по умолчанию имеет ширину в 20 символов).
Это значение по умолчанию.
time Определяет элемент управления для ввода времени без указания часового пояса (hh:mm).
url Определяет поле для ввода абсолютного URL-адреса.
week Определяет элемент управления для ввода порядкого номера недели в году и самого года (Неделя NN, YYYY). В элементе не указывается часовой пояс.

С выходом HTML 5 к элементу добавилось 12 новых типов (видов) полей, но к сожалению, пока не все из них имеют полную поддержку всеми передовыми браузерами. Как вы понимаете, к самым часто используемым видам полей относятся те, которые были введены задолго до HTML 5, например, такие как:

  • checkbox (флаговая кнопка).
  • radio (радиокнопка).
  • submit (кнопкa отправки формы).
  • text (однострочное текстовое поле).

Давайте рассмотрим пример использования этих элементов управления внутри формы:

И так по порядку, что мы сделали в этом примере:

  • Разместили два однострочных текстовых поля ( type = «text» > ) для ввода пользователем своего имени и фамилии. Присвоили этим полям уникальные имена атрибутом name (для корректной передачи и обработки формы обязательно указывайте для каждого элемента этот атрибут). Кроме того атрибутом value установили для этих полей значения по умолчанию (при заполнении полей значение этого атрибута будет соответствовать пользовательскому вводу).
  • Разместили две радиокнопки ( type = «radio» > ) для выбора одного из ограниченного числа вариантов. Обратите внимание, что для радиокнопок необходимо указывать одинаковое имя, чтобы была возможность выбрать только один вариант из предложенных. Для первой радиокнопки мы указали атрибут checked, который указывает, что элемент должен быть предварительно выбран при загрузке страницы (в данном случае поле со значением male ). Он применяется только для полей type = «checkbox» > и type = «radio» > , в противном случае он игнорируется.
  • Разместили пять флaговых кнопок (чекбоксов), которые позволяют пользователям указать необходимые параметры (выбрать необходимые значения). Присвоили этим полям уникальные имена атрибутом name и атрибутом value установили для этих полей необходимые значения.
  • Заключительный элемент, который мы разместили внутри формы это кнопка, которая служит для отправки формы ( type = «submit» > ). У кнопки по аналогии с другими элементами имеется свое имя (атрибут name ) и значение (атрибут value ).

Результат нашего примера в браузере:

Рис 32 HTML формы.

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

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

Библиотека, облегчающая разработку форм на сайтах

Хочу поделиться с общественностью своей небольшой (всего 6 Кбайт) js-библиотекой, которая сильно облегчает мне работу с формами при разработке сайтов, и позволяет сократить написание кода.
В любом, более-менее среднем и крупном проекте насчитается не один десяток форм, многие из которых желательно отправлять через AJAX. Часто для этого просто вешается обработчик и пишется скрипт, что-то типа этого:

И вроде всё работает, но, к сожалению, очень часто разработчики забывают мелочи, такие как:

  • отсутствие индикации отправки формы;
  • как следствие, возможность накликать множество запросов (повторная отправка не блокируется);
  • невозможность отправки формы с клавиатуры;
  • отсутствие индикации при ошибке отправки формы (например, сервер ответил 500-ой ошибкой);
  • хардкод url контроллера в js-скрипте.

Кроме того, есть множество тонкостей, которые не учтены в большинстве аналогичных библиотек, такие как: передача name=value кнопки, осуществляющей отправку формы, поддержка и атрибутов form, formaction, formmethod .
А учитывая то, что форм в крупных проектах достаточно много, то такие обработчики для каждого типа форм в результате образуют весомый объём кода. А ведь часто, формы достаточно простые, такие как «форма обратной связи», нам нужно всего лишь отправить форму и показать статус — отправлено письмо или возникла ошибка. С помощью описываемой в данной статье библиотеки можно вовсе не писать код для таких простых форм.
Приступлю к описанию возможностей.

Поддержка html5 атрибутов для старых браузеров

С пощью атрибутов form и formaction мы смогли решить проблему невозможности вложенных форм, а также выбор url контроллера в зависимости от действия.
Библиотека предоставляет polyfill для браузеров, которые не поддерживают данные атрибуты (IE form-loading когда происходит процесс отправки, благодаря этому можно с помощью CSS застилить это состояние формы так, как захочется.
Если всё же требуется возможность повторной отправки формы до завершения предыдущей, то достаточно добавить класс form-no-block .

Фильтрация пустых полей при отправке

Данная возможность может пригодиться для форм поиска/фильтрации товара, в которых много полей, для того, чтобы URL выглядели более наглядно. Согласитесь, что увидеть в адресной строке лучше
example.com/?price_to=1000
чем
example.com/?price_to=1000&price_to=&amount_from=&amount_to=
Просто добавьте класс form-no-empty к форме.

AJAX отправка формы

Алгоритм такой — форма отправляется через AJAX, и если она проходит валидацию и ошибок в отправки нет, то выводим Bootstrap Alert что всё в порядке, причём он заменит собой форму. Если же есть какие-то ошибки, выводим их в тег . И заметьте, нет ни строчки JavaScript. Библиотека имеет поддержку Bootstrap Alert, так, что он автоматически делает alert-dismissible и самостоятельно добавляет кнопку закрытия.

Для AJAX-форм генерируются следующие события:

  • formajaxbefore — перед отправкой формы, позволяет изменить все настройки $.ajax ;
  • formajaxdone — в случае успешной отправки;
  • formajaxfail — в случае возникновения ошибки;
  • formajaxalways — в любом случае, после завершения AJAX-запроса.

В целом, это тоже облегчает написание своих скриптов, т. к. позволяет навешивать код прямо на событие успешного ответа, минуя рутину с передачей URL и параметров. В событиях можно отменить поведение скрипта по-умолчанию, достаточно вызвать e.preventDefault() — никаких манипуляций с выводом контента не будет происходить.
Если же, наоборот, подгружаемый контент нужен и, более того, содержит другие компоненты, которые надо проинициализировать (например, datepicker). Для этого библиотека генерирует ещё два события:

  • contentprepare — до добавления контента в DOM;
  • contentinit — после добавления контента в DOM.

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

То есть при загрузке страницы мы также генерируем событие contentinit , на который навешиваем обработчик, инициализирующий все плагины.

AJAX отправка файлов

Отправить без перезагрузки страницы форму с файлами ещё сложнее, т. к. устаревшие браузеры этого вообще не умеют, и тут нужен iframe-метод для эмуляции этого процесса. Здесь я не стал изобретать велосипед, и отдал данный функционал полностью на плечи malsup jquery.form плагину, оставив лишь единый способ его отправки. На стороне сервера всё выглядит также, как если бы вы отправляли формы стандартным способом.
Чтобы отправить форму с файлами, необходимо подключить malsup jquery.form плагин и указать enctype=«multipart/form-data». Для пересылаемой данным способом формы дополнительно будет генерироваться событие:

  • formajaxprogress — событие, информируещее о текущем состоянии отправки.

Демо

AJAX редирект

Ещё одна небольшая полезная мелочь. Чтобы заставить страницу перейти на новую (осуществить редирект), просто укажите заголовок X-Redirect , значение которого — URL для перехода.

Кнопка, для классического субмита в AJAX-форме

Можно сделать так, что в AJAX-форме будет одна или несколько кнопок, которые отправляют форму обычным способом. Например, я это использую на странице корзины — когда пользователь меняет количество товара, то применяется AJAX для сохранения изменений. Когда же он нажимает кнопку «Перейти к оформлению», происходит обычная отправка той же формы.

Изменение внешнего вида кнопки отправки формы

Библиотека предоставляет ещё несколько хелперов для того, чтобы изменить вид кнопки отправки для того, чтобы пользователи понимали, что форма в процессе отправки. Для этого добавьте к кнопке CSS-класс btn-loading , а также используйте одну или обе возможности:

  1. aтрибут data-loading-text — меняет текст кнопки во время отправки формы на указанный в атрибуте, а после завершения, возвращает обратно;
  2. aтрибут data-loading-icon — добавляет к кнопке значок, показывающий процесс загрузки.

Например:

Дополнительно можно указать для одной или нескольких кнопок класс btn-submit-default , тогда если форма будет отправлена с клавиатуры, кнопки всё равно изменят свой вид.

Алерты для форм

Иногда бывает нужно, что надо отобразить пользователю какие-то предупреждения или сообщения об ошибках в форме, например, об ошибках валидации. Библиотека предоставляет простой интерфейс для добавления bootstrap alert-ов в элемент вывода формы. Используется так:

Заключение

Библиотека доступна в репозитариях npm и bower под наименованием paulzi-form :

Она достаточно молодая, поэтому жду отчётов об ошибках на гитхабе. Буду рад, если кому-то скрипт тоже облегчит жизнь, как и мне.

.submit() — обработчик отправки формы на сервер

.submit() — устанавливает обработчик отправки формы на сервер, либо запускает это событие.

Метод имеет три варианта использования.

  • handler — функция, которая будет установлена в качестве обработчика.
  • eventData — объект содержащий данные, для передачи в обработчик. Должны быть представлены в формате ;
  • handler — функция, которая будет установлена в качестве обработчика.

Вызывает событие submit, у выбранных элементов страницы.

В первых двух вариантах использования, метод является аналогом .on(«submit», handler) , а в третьем случае аналогом .trigger( «submit» ) .

Событие submit происходит непосредственно перед отправкой формы на сервер и в обработчике можно инициировать отмену отправки формы, вызвав метод eventObject.preventDefault() или просто возвратив false . Событие submit можно привязать только к элементу form .

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

Для примера рассмотрим HTML:

Обработчик события может быть привязан к форме:

Теперь, когда форма будет отправлена, будет выдано сообщение. Это событие происходит до фактической отправки, поэтому мы можем отменить это действие, вызвав .preventDefault() для объекта события или вернув false из нашего обработчика. Мы можем инициировать событие вручную при нажатии на другой элемент:

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

Событие отправки JavaScript не «всплывает» в Internet Explorer. Тем не менее, скрипты, которые полагаются на делегирование событий с событием отправки, будут последовательно работать в разных браузерах начиная с jQuery 1.4, что нормализовало поведение события.

Дополнительно

Событие submit() является лишь сокращением для .on(«submit», handler) , поэтому убрать установленный обработчик можно с помощью .off( «submit» )

Формы и их дочерние элементы не должны использовать имена ввода или идентификаторы, которые противоречат свойствам формы, таким как submit , length , или method . Конфликты имен могут вызывать сбои.

Простая форма обратной связи без перезагрузки страницы на PHP+jQuery

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

Сегодня я хотел бы показать самую простую и на 100% рабочую реализацию формы обратной связи без перезагрузки страницы с использованием технологии AJAX (jQuery) и обработки/отправки данных на PHP.

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

Технология AJAX, если вы еще не знаете, позволяет без перезагрузки страницы передать значения в PHP-скрипт (и не только), где, уже приняв эти данные, можно произвести необходимые операции.

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

Простой пример формы обратной связи без перезагрузки страницы

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

1. Первым делом сверстаем форму с нашими полями. CSS-стили мы упустим, так как сейчас нам это не так важно. В качестве полей сделаем «Имя», «E-mail» и поле для ввода сообщения:

Обратите внимание на элемент с классом «result» – в него мы будем выводить сообщения об ошибках или успешном отправлении сообщения.

2. Далее пишем скрипт, который соберет все данные с формы и отправит их в наш PHP-обработчик:

Скрипт вставляем перед закрывающим тегом

Как отправить HTML-форму без перезагрузки страницы

Что такое AJAX

При разработке сайтов бывает, что у нас возникает необходимость отправить данные html-формы без перезагрузки страницы в фоновом режиме (с использованием AJAX). В данной статье мы рассмотрим этот вопрос и покажем на примере как реализовать нашу задачу с помощью языков jquery и php. Мы получим скрипт, при выполнении которого, сервер отправляет, а клиент получает данные в формате JSON.

Технология Ajax стала популярной и часто применяется при создании сайтов в WEB 2.0. Многие уже успешные или начинающие web-сайты стремятся создать удобство для своих пользователей, что немаловажно в условиях конкуренции и огромного количества интернет-ресурсов. Кроме того, Ajax-технология помогает увеличить быстродействие вашего сайта. Это происходит благодаря тому, что пользователь не перегружает страницу целиком, когда необходимо обновить только некоторые элементы/части вашего сайта.

Разберемся как без перезагрузки страницы выполнить отправку данных формы при помощи Ajax

Здесь мы создадим демо-проект, который будет включать в себя 3 файла:

index.php — это главная страница, на которой размещена сама форма

ajax.js — это файл javascript, в котором содержится алгоритм ajax для обработки формы

action_ajax_form.php — это серверная часть, которая отвечает за обработку полученных от формы данных и возвращает клиенту ответ в формате JSON

Создайте первый файл под названием index.php с таким содержимым:

Мы подключим библиотеку jQuery и создали базовую HTML-разметку, а также подключили файл ajax.js, далее нам нужно будет создать этот файл.

Обратите внимание, что метод отправки формы у нас POST, задан . Также, после формы мы добавили div c >

Теперь создадим второй файл — ajax.js

В файле ajax.js есть два метода: $(«#btn»).click и sendAjaxForm. Первый метод — это слушатель событий кнопки. То есть, когда мы нажимаем на кнопку «Отправить», слушатель срабатывает и вызывает метод sendAjaxForm.

В метод sendAjaxForm(result_form, ajax_form, url) передаются поля: result_form — это div в который будут рендерится данные, ajax_form — это id формы отправки сообщения и url — это местоположение файла action_ajax_form.php который отвечает за серверную часть (обработка формы).

Создадим последний файл — action_ajax_form.php

action_ajax_form.php — это обработчик формы на стороне сервера. Этот файл отвечает за backend часть нашего мини-приложения. Для примера, мы делаем проверку: Если существуют переменные в POST запросе name и phonenumber, тогда мы формируем массив $result для JSON ответа от сервера. Затем, массив $result мы переводим в JSON объект, чтобы клиент ajax.js смог корректно получить данные в формате JSON.

Выводы

Как вы видите, реализовать AJAX отправку данных формы, без перезагрузки страницы очень просто. Скачать исходный код работы с AJAX, вы можете по ссылке. Файлы загрузите на ваш локальный сервер или хостинг, распакуйте и сложите все файлы в один каталог сервера.

Отправка всех полей формы на сервер с помощью ajax jQuery.

Как отправить данные с формы без перезагрузки страницы, да легко с помощью ajax.

Создадим простенькую форму:

Далее нам понадобится подключить jQuery

И делаем непосредственно наш Javascript

Ну и непосредственно (res.php) файл который будет принимать наши

данные и возвращать нам ответ:

Добавим на нашу страницу блок с атрибутом «results» куда будем выводить результат:

url (строка). Страница сервера, к которой будет сделан запрос.
type (строка: GET или POST). Тип запроса к серверу: GET или POS
data (строка). Данные, отправляемые на сервер.
cache (true или false). Включает или выключает кеширование браузером.
async (true или false). По умолчанию true. Включает или выключает асинхронные запросы

success вызывается, когда запрос завершился успешно. Ему передаются параметры: возвращаемые сервером данные, строка, содержащая код ответа сервера
error вызывается, когда запрос завершился неудачей. Передаются: xmlHttpRequest и строка, указывающая тип ошибки
complete вызывается, когда запрос завершился. Просто завершился, независимо от того, удачей или нет

Илон Маск рекомендует:  Что такое код asp servervariables
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL