Создание отправки формы без перезагрузки страницы


Содержание материала:

Отправка формы с помощью Ajax и JQuery

Тут будет вывод нашей формы

Дизайн студия OX2.ru

Эта статья является продолжением темы работы с Ajax с помощью JQuery. Если вы не читали предыдущие статьи, то обязательно прочтите!

Очень часто при создании сайтов требуется динамически отправлять данные на сервер, без перезагрузки страницы. Говорят, что наши предки для этого использовали невидимые фреймы, и в них отправляли данные. Но точно ни кто не знает, к сожалению, об этом сохранилось очень мало информации… Мы пойдем другим путем, и воспользуемся технологией Ajax. Кстати, динамические формы отправки данных на сервер очень сильно увеличивают стоимость создания сайта.

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

Создадим 2 файла, первый будет сама форма – index.html, второй form.php – обработчик формы.

Файл index.html (не забудьте скачать и подключить библиотеку JQuery):

Комментарии (Написать комментарий)

Комментарий:
Советую изменить немного код:

Из формы убрать:
onclick=»AjaxFormRequest(‘result_div_id’, ‘form_id’, ‘form.php’)»
в input type=»button» добавить

Что бы на почту ушло в файле php:
\r\n»;
$subject = «Проверка почты»;

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

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

Нам понадобится 2 файла:

Создаем в HTML-файле простейшую форму, при этом в заголовке документа подключим библиотеку JQuery:

Оставляем пустой блок с якорем “result_div_id” для вывода результата.

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

У меня есть сайт объявлений, и на странице, где показываются объявления, я создаю форму «отправить подсказку другу».

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

Я предполагаю, что форма должна быть отправлена на страницу php?

при отправке формы страница перезагружается. Я не хочу этого.

есть ли способ сделать его не перезагружать и все еще отправлять почту? Желательно без ajax или jquery.

16 ответов

вам нужно отправить запрос ajax для отправки электронной почты без перезагрузки страницы. Взгляните на http://api.jquery.com/jQuery.ajax/

ваш код должен быть чем-то вроде:

форма будет отправлена в фоновом режиме в send_email.php страница, которая должна будет обработать запрос и отправить электронное письмо.

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

вы либо используете AJAX, либо вы

  • создайте и добавьте iframe в документ
  • установите имя iframes в «foo»
  • установите цель формы в «foo»
  • отправить
  • имеют действие формы рендеринга javascript с «родителем».уведомлять.(..) ‘, чтобы дать обратную связь
  • при желании вы можете удалить элемент iframe

самый быстрый и простой способ-использовать iframe. Поставьте рамку внизу страницы.

и в вашей форме это сделать.

и сделать кадр невидимым в вашем css.

именно так он может работать без jQuery и AJAX, и он работает очень хорошо, используя простой iFrame. Мне это нравится, работает в Opera10, FF3 и IE6. Благодаря некоторым из вышеперечисленных плакатов, указывающих мне правильное направление, это единственная причина, по которой я размещаю здесь:

php-код, генерирующий страницу, которая вызывается выше:

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

Я попробовал это с загрузкой файлов (что, как мы знаем, не может быть сделано через AJAX), и это сработало красиво.

надо взять справки jquery-ajax в этом случае. Без ajax , в настоящее время нет никакого решения.

во-первых, вызовите функцию JavaScript при отправке формы. Просто установите onsubmit=»func()» . Даже если функция вызывается,будет выполнено действие по умолчанию отправки. Если это будет выполнено, не будет никакого способа остановить страницу от обновления или перенаправления. Итак, следующая задача-предотвратить действие по умолчанию. Вставить следующую строку в начале func() .

теперь не будет перенаправления или обновления. Итак, вы просто делаете вызов ajax из func() и делать все, что вы хотите делать, когда вызов заканчивается.

пример:

вы пробовали использовать iFrame? Нет ajax, и исходная страница не будет загружаться.

вы можете отобразить форму отправки как отдельную страницу внутри iframe, и когда она будет отправлена, внешняя/контейнерная страница не перезагрузится. Это решение не будет использовать какой-либо ajax.

Топ-пост этого месяца:  Yii2 view компонент. Yii2 render

Это должно решить вашу проблему.
в этом коде после нажатия кнопки отправки мы вызываем jQuery ajax и передаем url для post
введите POST / GET
данные: информация о данных вы можете выбрать поля ввода или любые другие.
sucess: обратный вызов, если все в порядке с сервера
текст параметра функции, html или json, ответ от сервера
в sucess вы можете писать предупреждения записи, если данные, которые вы получили, находятся в каком-то состоянии и так далее. или выполните свой код, что делать следующий.

Отправка Формы Без Перезагрузки Страницы И Получение Результата Отправленных Данных На Той Же Странице

вот некоторые из кода, который я нашел в интернете, которые решают эту проблему

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

Часто возникает необходимость отправки формы без перезагрузки страницы. В этом случае на помощь приходит технология ajax и фреймворк jQuery.

Например имеем форму следующего вида:

Чтобы отправить эту форму без перезагрузки страницы, используем javascript:

sendOrderForm.php — файл, который обрабатывает пересылаемые формой данные. Например он может быть таким:

Офлайн-конверсия Яндекс.Метрики. Теряются выполнения целей в Метрике

Как поменять E-mail администратора в WordPress без подтверждения

Да я тебя по ip вычислю! Геолокация пользователей

WordPress. Форма обратной связи без плагинов и без перезагрузки

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

  • 1. Создаем и выводим форму
  • 2. Внешний вид формы
  • 3. Работа формы
  • Создание и подключение нужных файлов
  • Отправка данных формы через ajax
  • Обработка Ajax
  • Заключение

Для тех кто хочет разобраться или по какой-то причине не любит плагины.

Хотя плагином сделать подобную форму можно без проблем — это будет быстрее, проще и удобнее. Например, плагином Simple Basic Contact Form.

Итак, создаем форму обратной связи без плагина. Алгоритм простой

  1. Создание и вывод формы
  2. Подключение ajax
  3. Подключение обработчика

Внимание! Код добавлять в файл functions.php дочерней темы или пустой плагин.

1. Создаем и выводим форму

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

Теперь создаем страницу и выводим на ней шорткод.

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

2. Внешний вид формы

Добавим красоты нашей форме.

Вот так теперь выглядит форма.

3. Работа формы

Теперь заставим форму работать.

Создание и подключение нужных файлов

Для работы формы потребуется создать файл js. Например, feedback.js . Файл необходимо создать в папке дочерней темы. Или в соответсвующей папке плагина.

Теперь через файл functions.php подключаем нужное.

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

Отправка данных формы через ajax

В подключенный файл feedback.js добавляем отправку данных формы.

Если все верно подключено, при отправке данных скрипт будет срабатывать и выдавать ошибку.

Обработка Ajax

Теперь требуется написать обработчик скрипта. Напоминаю, обработка ajax «подвешивается» на динамические хуки wp_ajax_ и wp_ajax_nopriv_ и требуется проверка nonce .

Заключение

Вот и все. Если все сделано правильно, то при отправке пустой формы будут такие сообщения.

Если отправка прошла успешно, то появится соответствующее сообщение

На этом все. Если есть вопросы и предложения пишите в комментариях. Удачи!

Ajax RDmailform — форма отправки сообщений без перезагрузки страницы

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

Код формы базируется на двух js: jquery.form.min.js — для ajax отправки и jquery.rd-mailform.min.js — валидация полей + календарь (связана с jquery.form.min.js). Данную форму я нашел на западном сайте, она настолько мне понравилось, что пришлось потратить день, чтобы понять принцип ее работа, а также создать удобный пакет установки.

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

Скриншоты:

Особенности формы:
— может через ajax передовать файлы в любом количестве на почту
— вместо checbox и радиокнопок используются select-ы
— можно задавать иконки на каждое поле, по умолчанию карандаш
— можно создавать любое количество таких форм
— есть валидация полей
— красивые статусы ошибки/отправки формы
— из главного минуса — нет мультиселектов (только если обрубить select в jquery.rd-mailform.min.js)
— адаптивный дизайн (форма сама подстраивается под размер экрана с viewport)
— если поле создать с типом type=»date», то к нему автоматически подгрузится календарь

Установка формы

В скачанном примере просто скопировать форму с классом rd-mailform . В action поставьте ссылку на исполняющий php файл.

Добавление поля на примере input (главное, чтобы различались name полей):

В label:
data-add-placeholder — для эффекта исчезновения placeholder (при клике)
data-add-icon — добавляет иконку (font-awesome) для поля в зависимости от ИМЕНИ поля. (В этом случае всегда должен быть type=»text»).

В input:
data-constraints=»@SelectRequired» — условие перед отправкой поля (обязательные поля или формат записи). Возможные значения внизу.

Доступные иконки:
Карандаш (по умолчанию): name=»msg*»,
ФИО: name=»name*», Почта: name=»email*»,
Телефон: name=»phone*»,
Дата: name=»date*»,
Люди: name=»guests*»
Новые иконки можно добавить в rd-mailform.css (1294 строка)

Топ-пост этого месяца:  Конкурс в Инстаграм как провести розыгрыш или конкурс в 2020

Статусы отправки — что должен возвращать php обработчик, после успешной/не успешной отправки сообщения:
‘ MF000 ‘: ‘Отправлено!’,
‘ MF001 ‘: ‘Получатель не устанавлен!’,
‘ MF002 ‘: ‘Форма не будет работать локально!’,
‘ MF003 ‘: ‘Пожалуйста, заполните поле email в форме!’,
‘ MF004 ‘: ‘Пожалуйста, определите тип Вашей формы!’,
‘ MF254 ‘: ‘Что-то не сработало в функции PHPMailer!’,
‘ MF255 ‘: ‘Произошла ошибка отправки формы!’

Статус организовать очень просто, например, если в mail.php у вас форма отправилась успешно, то пишите: echo ‘MF000’;

В php обработчик вся информация передается методом serialize() , поэтому там могут быть и файлы $_FILES.

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

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

Для этой тривиальной задачи, я заранее нашел и модифицировал скрипт, который работает на AJAX технологии. Также я подготовил красивое оформление полей, используя фреймворк Bootstrap 3. Достаточно скопировать мои CSS-стили и форма примет готовый для использования вид.

1 — подключаем Jquery библиотеку:

2 — устанавливаем HTML форму с использованием Bootstrap разметки:

3 — размещаем JS скрипт

Этот скрипт размещается непосредственно под HTML формой и после объявления jQuery.

4 — рассмотрим код обработчика, который нужно разместить в файл post.php

В обработчике достаточно поменять значение переменной $mail_to, вписав туда свою почту.

4 — копируем стили оформления

Для корректного отображения формы должен быть подключен Bootstrap 3.

Вот и все! Наша форма готова. Скачивайте и оставляйте свои комментарии.

Cмотрю на свой контент и думаю: стал бы я сам делиться им с друзьями?

Похожие статьи:

Комментарии ( )

Здравствуйте! Я не тестировал, но должно сработать вот так:

После этой строчки
$(‘.messages’).html(data.result);

Нужно добавить в select атрибут name, вот так:

Здравствуйте Алексей. Все сделал как вы сказали но что то не работает. Не отправляет форма. Показывает что поле select не заполнено.
в файл PHP дополнительно добавил следующее ниже скрипт. Вроде скрипт php делает проверку поля select но само поле в html остается чистым незаполненным возможно что то с не стыковка с bootstrap.CSS или надо дописать CSS к форме. Если не трудно посмотрите приложил архив form_select.rar

В файл PHP дополнительно добавил следующее.
// проверяем корректность полей if($_POST[‘select[name=»form_str»]’] == «») $errors[] = «Поле Тип списков не заполнено»; // собираем данные из формы $message .= «Тип списков: » . $_POST[‘select[name=»form_str»]’] . » «;

Действующие акции

Несколько форм на одной странице с отправкой без перезагрузки

Вы можете скачать готовые файлы, в которые дополнительно включена проверка введенных данных в форму (валидация), поделившись статьей в Twitter.

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

За пересылку письма с введенными в форму данными отвечает PHP обработчик. Для передачи данных в обработчик используется кнопка с типом submit . В случае использования нескольких форм связи с одним php обработчиком Вы должны передать в него данные именно той формы, в которой была нажата кнопка «Отправить». Это можно сделать через if/else , с учетом разных имен атрибутов, наплодив одинаковых кусков кода, можно создать кучу обработчиков с разными именами, но одинаковым кодом, а можно использовать скрипт jQuery с помощью которого данные в обработчик будут отправляться из той формы где было произведено нажатие на кнопку «Отправить».

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

Несколько форм связи с одним обработчиком

К примеру, возьмем три формы.

Присвойте каждой форме свой уникальный id . У нас это form1, form2 и form3. Кроме того, для стилизации формы примените классы css , для отображения подсказки включите атрибуты placeholder , а для формирования темы письма добавьте скрытый input .

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

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

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

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

Форма связи в процессе заполнения

После нажатия кнопки «Отправить» вместо полей ввода формы у вас появится сообщение об отправке.

Форма связи после нажатия кнопки «Отправить»

update: При необходимости восстановления формы после отправки данных, вы можете использовать следующее решение (вставьте выделенный код в указанное место и оберните все input в форме в div с id, например inputs):

Метод .load() загружает данные и вставляет в указанный элемент.

«#parent» — id формы, в которую необходимо вставить удаленные данные.
В приведенном примере скрипта с отправкой данных форм без перезагрузки страницы, оберните в div все input . Назначьте ему id , например inputs . Этот div с вложенными полями input удаляется скриптом, на его месте появляется сообщение об отправке. Получается, что в коде остается тег form с id , этот id необходимо указать в #parent , это станет контейнером для загрузки скриптом данных формы (удаленные input ).

Топ-пост этого месяца:  Как добавить сайт в Dmoz каталог Пошаговая инструкция и важные советы

«http://site.ru» — адрес вашей страницы с формой, откуда скрипт загрузит удаленные input . Например, если ваша форма будет находиться по адресу http://site.ru/contacts.html, вставляете этот адрес.

«#child» — id блока, который содержит input . В данном случае div #inputs .

3000 — время в мс через которое восстановится код формы.

PHP обработчик

Большинство форм для передачи данных используют метод POST , это позволяет «спрятать» данные формы и не загромождать URL в адресной строке.

Данный обработчик содержит проверку метода передачи данных.

Создавая формы на страницах своего сайта, не забывайте о внедрении проверки введенных данных и методах защиты от спама.

Возникли вопросы? Давайте обсудим их в комментариях.

Создание сайта компании
Madcatzz

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

Создание сайта компании
Madcatzz

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

Не получается отправить форму без перезагрузки страницы?

Есть простая форма, которую получилось отправить, но не пойму почему происходит перезагрузка страницы? ajax же должен отправлять без перезагрузки. Что я делаю не так? Кроме того в url помещается все данные из формы даже после перезагрузки. Вообщем, что то идет не так, а что именно не могу разобраться, кто может, подскажите плиз.

1 ответ 1

Вам поможет: preventDefault();

Теперь поясню: Вы слушаете событие формы submit . Как оно работает обычно? Перезагружает страницу и грубо говоря отправляет данные из формы. Так вот нужно перехватить стандартное поведение браузера такое как перезагрузка и отправка данных, и вместо него сделать что-то своё, в данном случае: послать AJAX, для этого и передаём в функцию само событие e , и делаем ему preventDefault();

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

У меня есть сайт для объявлений, и на странице, где показываются объявления, я создаю форму «Отправить отзыв другу».

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

Я предполагаю, что форма должна быть отправлена ​​на страницу php правильно?

При отправке формы страница перезагружается. Я не хочу этого.

Есть ли способ заставить его не перезагружать и отправлять почту? Предпочтительно без ajax или jquery.

Вам нужно будет отправить запрос ajax, чтобы отправить электронное письмо без перезагрузки страницы. Взгляните на http://api.jquery.com/jQuery.ajax/

Ваш код должен быть примерно таким:

Форма будет send_email.php в фоновом режиме на страницу send_email.php которая должна обработать запрос и отправить электронное письмо.

Я нашел то, что, по-моему, проще. Если вы разместите Iframe на странице, вы можете перенаправить выход из него и показать его. Конечно, вы ничего не можете сделать. В этом случае вы можете установить отображение iframe равным none.

Вы либо используете AJAX, либо вы

  • создать и добавить iframe в документ
  • установите имя iframes в ‘foo’
  • установите для объектов target значение ‘foo’
  • представить
  • имеют формы action render javascript с ‘parent.notify(. )’, чтобы дать обратную связь
  • Необязательно вы можете удалить iframe

Самый быстрый и простой способ — использовать iframe. Поместите рамку внизу страницы.

И в вашей форме сделайте это.

и сделать кадр невидимым в вашем css.

это именно то, как он МОЖЕТ работать без jQuery и AJAX, и он работает очень хорошо, используя простой iFrame. Я ЛЮБЛЮ ЭТО, работает в Opera10, FF3 и IE6. Благодаря некоторым из вышеперечисленных плакатов, указывающих на меня в правильном направлении, это единственная причина, по которой я размещаю здесь:

код php, создающий страницу, которая вызывается выше:

Это должно решить вашу проблему.
В этом коде после нажатия кнопки нажмите мы вызываем jquery ajax, и мы передаем url для отправки типа POST/GET
data: информация о данных вы можете выбрать поля ввода или любой другой.
sucess: обратный вызов, если все в порядке с сервера
текст параметра функции, html или json, ответ от сервера
вы можете написать предупреждения о записи, если данные, полученные вами, находятся в каком-то состоянии и т.д. или выполните свой код, что делать дальше.

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

Я попробовал его с загрузкой файлов (которые, как мы знаем, не могут быть выполнены с помощью AJAX), и он отлично работал.

В этом случае необходимо принять помощь jquery-ajax . Без ajax в настоящее время нет решения.

Сначала вызовите функцию JavaScript при отправке формы. Просто установите onsubmit=»func()» . Даже если функция вызывается, будет выполняться действие по умолчанию для представления. Если он будет выполнен, не будет возможности остановить обновление страницы или перенаправление. Итак, следующая задача — предотвратить действие по умолчанию. Вставьте следующую строку в начале func() .

Теперь не будет перенаправления или обновления. Таким образом, вы просто делаете вызов ajax из func() и выполняете все, что хотите, когда заканчивается вызов.

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