Форма обратной связи jquery
Содержание
В этой статье мы расскажем о том, как сделать форму с ajax -запросом, при помощи библиотеки jQuery . Другими словами, чтобы страница не перезагружалась, при отправке данных через форму.
Библиотека jQuery очень удобный инструмент. Она очень сильно упрощает работу с ajax -запросами, для этого у неё есть специальная конструкция.
Рабочую форму, а так же её создание можно найти в другой нашей статье Простая форма обратной связи своими руками. Или сразу скачать готовый пример из той статье:
Так, как мы работаем с библиотекой jQuery , не забываем подключить её в файла index.html следующей строкой:
Теперь создадим папку js , в которую поместим наш будущий скрипт в файле под названием ajax.js . Подключаем этот файл в index.html , следующей строкой в :
Теперь добавим id тэгу
Открываем файл ajax.js и добавляем туда следующий код:
Если у вас есть базовые знания по JavaScript , то комментарии помогут вам разобраться и полностью понять код выше.
Стоит обратить внимание на 7 строчку, где задается обработчик формы, путь нужно указывать так, чтобы скрипт нашел его, иначе сообщения не будут отправляться и вы будете долго ломать голову – почему. Смотреть то, нашел скрипт или нет, можно в Средствах разработчика любого браузера.
Мы записали функцию, которая будет отправлять данные через ajax, теперь добавим с типом submit событие onClick (Выполняет при нажатии на элемент), по которому и будет вызываться эта функция.
Вот как станет выглядеть форма полностью:
Если теперь попробовать послать сообщение, то страница всё равно перезагрузится, потому что для с типом submit это заложено в коде по-умолчанию. Проблема решается изменением типа на button :
Результат работы вы можете проверить на демо-странице (напоминаем, что письмо отсылается на адрес, который вы указали в поле формы):
А исходники скачать по ссылке ниже:
Если у вас есть вопрос, задавайте их в комментариях ниже.
Дата публикации: 30 ноя 2016г.
Во всплывающем окне, выводить форму обратной связи, с валидацией всех полей, плюс защита от спама (аналог капчи).
Одна из особенностей технологии AJAX, заключается в обмене данными с сервером, без перезагрузки страницы.
Данная AJAX форма отправляет письмо без перезагрузки страницы, проверяет статус отправки и в случае успешной отправки, выводят окно с сообщением:
Код использованный в данном мануале, по сути своей модернизация кода, который описан в постах:
Замечу, что проверка правильности заполнения полей (она же валидация) осуществляется средствами HTML5, в следствии чего она не будет работать на старых браузерах.
Есть несколько способов обойти это ограничение, один из способов установить дополнительный плагин jQuery Validation.
Всем привет, сегодня я вам покажу как сделать форму обратной связи которая будет работать с помощью отправки через Ajax обработчик. Данная форма будет отправлять данные без перезагрузки.
Я уже выкладывал запись в которой рассказывал как сделать простую форму обратной связи – http://prog-time.ru/prostaya-forma-obratnoj-svyazi-na-php/
Если вы читали прошлую запись, то знаете что форма должна быть написана внутри тега form . Вся информация передается через поля input .
Для реализации отправки формы через Ajax, нам понадобится 2 файла:
- index.php – здесь будет HTML форма и jQuery обработчик
- send.php – PHP обработчик
В самом начале вам нужно подключить библиотеку jQuery. Добавьте эту строчку внутрь тега head .
HTML код
input и textarea – поле для ввода информации.
Каждому тегу input и textarea нужно дописать уникальное значение атрибута name, по которому мы в дальнейшем будем идентифицировать поля.
jQuery код
В самом низу необходимо разместить jQuery код.
PHP обработчик
Теперь мы прописывает в PHP файл код Ajax запроса. У меня это файл send.php
Не отправляется письмо!
Если вы пользуетесь Open Server, то у вас не получится отправить письмо на реальную почту. Вместо этого Open Server создает текстовый документ, в который записывается письмо. Все подобные текстовые документы отправки, находятся в userdata empemail
Если вы тестируете данный код на хостинге, то убедитесь что на вашем хостинге разрешена отправка писем. Многие бесплатные хостинги запрещают отправку писем, отключая данный модуль в PHP. Для решения этой проблемы вам нужно обратиться в тех. поддержку.
