Форма обратной связи jquery

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

Библиотека jQuery очень удобный инструмент. Она очень сильно упрощает работу с ajax -запросами, для этого у неё есть специальная конструкция.

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

Так, как мы работаем с библиотекой jQuery , не забываем подключить её в файла index.html следующей строкой:

Теперь создадим папку js , в которую поместим наш будущий скрипт в файле под названием ajax.js . Подключаем этот файл в index.html , следующей строкой в :

Теперь добавим id тэгу

Открываем файл ajax.js и добавляем туда следующий код:

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

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

Мы записали функцию, которая будет отправлять данные через ajax, теперь добавим с типом submit событие onClick (Выполняет при нажатии на элемент), по которому и будет вызываться эта функция.

Вот как станет выглядеть форма полностью:

Если теперь попробовать послать сообщение, то страница всё равно перезагрузится, потому что для с типом submit это заложено в коде по-умолчанию. Проблема решается изменением типа на button :

Читайте также:  Interbase firebird development studio

Результат работы вы можете проверить на демо-странице (напоминаем, что письмо отсылается на адрес, который вы указали в поле формы):

А исходники скачать по ссылке ниже:

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

Дата публикации: 30 ноя 2016г.

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

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

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

Код использованный в данном мануале, по сути своей модернизация кода, который описан в постах:

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

Есть несколько способов обойти это ограничение, один из способов установить дополнительный плагин jQuery Validation.

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

Я уже выкладывал запись в которой рассказывал как сделать простую форму обратной связи – http://prog-time.ru/prostaya-forma-obratnoj-svyazi-na-php/

Если вы читали прошлую запись, то знаете что форма должна быть написана внутри тега form . Вся информация передается через поля input .

Для реализации отправки формы через Ajax, нам понадобится 2 файла:

  1. index.php – здесь будет HTML форма и jQuery обработчик
  2. 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. Для решения этой проблемы вам нужно обратиться в тех. поддержку.

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

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