Js отправка формы без перезагрузки страницы. Используем PHP, jquery, ajax и foreach для редактирования без перезагрузки страницы

2 years ago | 76.1K

Что такое 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 с таким содержимым:

Телефон: "+result.phonenumber); }, error: function(response) { // Данные не отправлены $("#result_form").html("Ошибка. Данные не отправлены."); } }); }

В файле 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.

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

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

Ах да, приведу в порядок айдишники и классы, чтобы легче понималось что и зачем. Изменю дизайн формы, так интереснее. В одной из следующих статей, возможно, подключим к этой форме reCapthсa от Google, и настроем цель «Событие», при успешной отправке, так что готовится целый цикл статей.

Как сделать форму обратной связи в модальном окне

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

Обратите внимание на путь к файлам. Я решил поместить практически все файлы в папку modalform, чтобы легче было подключать к проекту.

Прежде чем перейти к разметке формы, подключим css файлы модального окна. Я делаю это между тегами head:

Итак, теперь перейдем к разметке самой формы и кнопки вызывающей ее. Начнем с кнопки.

Оставить заявку

Тут — все просто. Обычная ссылка с произвольным классом. Data-remodal-target используется для того, чтобы вызвать модальное окно, аналогично, если бы использовался href со ссылкой на id. Но зачем нам этот мусор в адресной строке. В свою очередь модальное окно с формой выглядит следующим образом:

Закажите обратный звонок и наш консультант свяжется с вами

Введите ваше имя Введите ваш телефон

сайт

Хоть кода, на первый взгляд, достаточно много, на самом деле все не так сложно. Вся форма обернута в div c классом remodal. У него есть data-remodal-id с таким же параметром как у кнопки. То есть firstForm. Именно благодаря им, при клике на кнопку открывается нужное окно, в случае, если на странице их несколько.

Data-remodal-options — один из способов задать или отключить некоторые возможности скрипта для модального окна. Подробнее можно почитать на официальном из сайте. Ссылку уже давал выше. В моем случае. Я отключил появление якоря в адресной строке и запретил закрытие окно после нажатия кнопки «отправить».

Внутри сама форма с fieldset(ами). Здесь важно обратить внимание, на параграф с классом «msgs». Именно сюда будет выводиться сообщение об успешной отправке или ошибке. Раньше сообщение выводилось прямо внутри формы, заменяя весь контент внутри.

Еще один момент. Скрытое поле c классом formInfo. Оно нужно для того, чтобы отличать заявки и понимать какую именно форму заполнил пользователь, в случае, если их несколько разных. Просто заполняем нужным текстом значение value.

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

Теперь давайте посмотрим на скрипт, который поможет нам отправить форму без перезагрузки страницы. Я назвал его form.js:

$(document).ready(function () { $("form").submit(function () { // Получение ID формы var formID = $(this).attr("id"); // Добавление решётки к имени ID var formNm = $("#" + formID); var message = $(formNm).find(".msgs"); // Ищет класс.msgs в текущей форме и записываем в переменную var formTitle = $(formNm).find(".formTitle"); // Ищет класс.formtitle в текущей форме и записываем в переменную $.ajax({ type: "POST", url: "modalform/mail.php", data: formNm.serialize(), success: function (data) { // Вывод сообщения об успешной отправке message.html(data); formTitle.css("display","none"); setTimeout(function(){ //$(formNm).css("display","block"); $(".formTitle").css("display","block"); $(".msgs").html(""); $("input").not(":input, :input").val(""); }, 3000); }, error: function (jqXHR, text, error) { // Вывод сообщения об ошибке отправки message.html(error); formTitle.css("display","none"); // $(formNm).css("display","none"); setTimeout(function(){ //$(formNm).css("display","block"); $(".formTitle").css("display","block"); $(".msgs").html(""); $("input").not(":input, :input").val(""); }, 3000); } }); return false; }); //для стилей формы var $input = $(".form-fieldset > input"); $input.blur(function (e) { $(this).toggleClass("filled", !!$(this).val()); }); });

Давайте немного поясню, что тут происходит. Мы вызываем функцию, когда произошло событие submit у формы (нажали на отправку). Затем получаем id формы и сохраняем в переменную formNm. Теперь, id нашей формы в ней. В прошлой статье именно сюда выводилось сообщение. И именно об этом моменте я так часто писал в комментариях. Нужно просто указать другое место для вывода. В нашем случае мы все сообщения будем выводить в заранее подготовленное место. Это тег «p» с классом «msgs».

В скрипте, говорим, что на время показа сообщения об успешной или не успешной отправке, скроем заголовок. А через 3 секунды вернем все на место и отчистим поля формы вместе с сообщением.

Файл, который отправит полученные данные — mail.php. Вот его код:

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

Создаём переменную темы сообщения в email и функцию mail c переменными получателя, темы сообщения и самим сообщением.

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

JS скрипт - send.js

Скрипт выполнится, когда загрузится DOM дерево.

$(document).ready(function() {

Проверка на заполненность полей, форма не отправиться, если хотя бы одно поле останется пустым. Атрибут HTML5 - required , поддерживается не всеми браузерами.

$("#form").submit(function() {

Отвечает за отправку данных в PHP обработчик через метод AJAX . Собираем все данные из нашей формы и при помощи функции serialize преобразуем их в строку для отправки POST методом на mail.php .

Метод done подтверждает успешность выполненных действий.

}).done(function() {
$(this).find("input").val("");

После отправки данных на mail.php , пользователь видит окно с подтверждением, что заявка получена. Функция trigger позволяет закрыть окно, нажав на кнопку OK .

Alert("Ваша заявка принята! Спасибо.");
$("#form").trigger("reset");
});
return false;
});
});

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

Демо пример отправки формы

Создавать AJAX-форму без перезагрузки страницы увлекательно. А ещё интереснее "вдыхать жизнь" в страницы, этому научит вас мой видеокурс

Недавно я столкнулся с вполне, на мой взгляд, распространённой задачей: нужно обеспечить пользователю возможность загрузить на сервер любое число, скажем, картинок с комментарием к каждой из них в рамках одного интерфейса. В моём случае это было: фото товара, его описание и количество. Для наглядности прикладываю скриншот интерфейса:Идея и алгоритм решения Так как описания и фотографии для получения конечного результата можно изменять очень много раз, решено было осуществить следующую схему работы: фотографии загружаются на сервер на одной при клике на фото-иконку, при этом в случае успеха сервер возвращает имя картинки, а при неуспехе - «error». Соответственно, в случае успеха, фото-иконка заменяется на миниатюру загруженного фото, а в скрытое поле формы соответствующей строки сохраняется её имя, а при неуспехе мы получаем фото-иконку и пустое скрытое поле формы соответствующей строки, отвечающее за имя фото. Текстовая же информация при изменении любого поля формы отправляется на сервер вся в формате массив [имяФото, описаниеДетали, количествоШт] - это наиболее универсально: один и тот же метод отвечает за полное обновление списка товаров при их редактировании или удалении. Как известно, AJAX не умеет отправлять файлы, поэтому реализуем процедуру загрузки с помощью обычной формы, в качестве target которой укажем скрытый фрейм, который и будет перезагружаться вместо страницы.