< Заур Магомедов />

профессиональный верстальщик и блоггер

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

Заур Магомедов
Главная » Приятные полезности для сайта » RSForm — ajax отправка форм без перезагрузки страницы

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

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

Пост был обновлен: Сен 27, 2016

Здравствуйте дорогие друзья! В данной статье хочу показать, как можно отправлять данные из формы компонента RSForm для Joomla 3 без перезагрузки страницы, применив технологию ajax. Хочу сказать также, что данный метод позволяет отправлять прикрепленные файлы из формы. Для отправки формы я применил jQuery плагин под названием jQuery Form Plugin. Теперь давайте обо всем по порядку.

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

Вообще эта статья рассчитана для тех, кто уже знаком с компонентом RSForm. Я здесь не буду показывать как создавать формы, поля и т.д. Напишу по этому поводу отдельную статью специально для новичков. Если кто не знает RSForm — это один из мощных компонентов конструкторов форм для cms Joomla 3. Но единственное, лично для меня, что не хватает в RSForm — это асинхронная отправка данных, т.е. без перезагрузки страницы. Поэтому я поискал решение этого вопроса и нашел небольшую библиотеку jQuery Form Plugin с помощью которой мы можем отправлять форму без перезагрузки страницы. Данную библиотеку рекомендовал использовал сам разработчик RSForm. Я наткнулся на сообщение на их официальном форуме, там люди как раз интересовались по поводу ajax. В довесок я написал небольшой плагин на jQuery, который выводит сообщение благодарности на 4 сек. после того, как форма была успешно отправлена (файл init.js). Почему плагин? Да потому, чтобы не приходилось дублировать один и тот же код в случае, если у нас на сайте несколько форм.

Конечно можно использовать и другие библиотеки (я их называю костыли) для отправки форм на ajax, но тут следует иметь ввиду, что не все ajax-скрипты могут отправлять прикрепленные файл из форм. А ведь это иногда может быть просто необходимо. А с jQuery Form Plugin с этим проблем нет. Единственно в чем я так и не разобрался это то, когда выводишь поле каптча reCaptcha 2.0 от Гугл сообщения с формы не приходят на e-mail. Но со спамом я решил бороться с помощью ключа Akismet. Я считаю, что против спама лучшее не придумаешь, чем Akismet.

Читайте также:  Анимированная кнопка для формы на чистом CSS

Итак, качаем файлы по ссылке выше. В архиве лежат три файла: сама библиотека jQuery Form Plugin (formplugin.js), скрипт инициализации плагина (init.js) и стили стилизации сообщения благодарности (style.css). Подключаем скрипты в шаблоне нашего сайта. Можно добавить подключение перед закрывающим тегом body.

<script src="/templates/ваш шаблон/js/formplugin.js"></script>
<script src="/templates/ваш шаблон/js/init.js"></script>

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

<!-- Подключаем jQuery с CDN -->
<script src="http://code.jquery.com/jquery-1.12.1.min.js"></script>

Подключение jQuery идет всегда выше скриптов, зависящих от нее. Далее идем в панель управления Joomla и открываем созданную форму в RSForm. Здесь нам надо добавить общую обертку с определенным классом всем полям формы. Мы будем скрывать форму и показывать сообщение при успешной отправке. Но прежде, чем вставлять код нам необходимо отключить автоматическую генерацию кода. Для этого над полем кода выставите переключатель «Генерировать макет автоматически» в положение «Нет«. Итак, открываем форму на редактирование в RSForm -> Свойства -> Макет формы. У меня интерфейс RSForm переведен на русский язык, если у вас нет перевода, то ориентируйтесь по скриншоту ниже. Вставляем открывающий тег DIV с классом hide-form-success после метки «{error}«, а закрывающий тег DIV вставляем в самый конец кода.

Внимание! Не удаляйте коды «{*:validation}», т.к. в данном случае валидация формы будет работать некорректно.

Макет формы компонента RS Form

Следующее что мы сделаем это  изменим индефикатор формы, зададим свое название в зависимости от предназначения формы. По умолчанию форме задается id=»userForm». Я, например, данную форму на демо-сайте назвал id=»demoForm». Переходим в атрибуты формы и меняем id.

Атрибуты форм RS Form

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

Включение ajax проверки полей формы RSForm

Теперь откроем файл init.js и инициализируем нашу форму с id=»demoForm» для отправки. Также здесь впишем текст сообщения, который будет показан после отправки формы.

jQuery(document).ready(function($) {
    $('#demoForm').sendForm({
        successTitle: "Ваша форма отправлена!", // Переопределяет стандартный вывод заголовка после отправки формы
        successText: "Спасибо за ваше обращение." // Переопределяет стандартный вывод текста после отправки формы
    });
}); // end ready

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

Читайте также:  Горизонтальное многоуровневое меню на css с эффектом анимации

Можно немного стилизовать вывод сообщения благодарности.

/** Сообщение благодарности **/
.sys-messages {
    padding: 15px;
    text-align: center;
}
.success-title {
    color: #1FAD21;
    font-size: 22px;
    margin: 0 0 15px;
}
.success-text {
    color: #333;
    font-size: 14px;
}

Вставьте данные стили в ваш файл стилей шаблона.

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

Обновлено 26.09.2016

В связи с выходом новой версии RSForm 1.52++ заметил, что не работает ajax отправка формы с включенной ajax валидацией. Если валидацию отключить, то форма отправляет пустые данные. Дело в том, что в последних версиях разработчики повесили событие проверки заполненности полей на кнопку отправки, что привело как раз к неработоспособности вышеизложенного метода. Пришлось добавить свою валидацию, а родную ajax валидацию RSForm отключить. Выкладываю полный код плагина сюда. Единственно, что нужно учесть это то, что обязательные поля необходимо обернуть блоком с классом — required-field.

/* =============================================================

 C собственной валидацией (валидация RsForm должна быть отключена) для версии - 1.52++
 Обязательное поле input надо обязательно обернуть родительским блоком с классом - required-field

============================================================================================================== */
(function($) {
 jQuery.fn.sendForm = function(options) {
 options = $.extend({
 successTitle: "Ваше сообщение успешно отправлено!",
 successText: "Мы свяжемся с Вами в самое ближайшее время"
 }, options);

var make = function() {
 var optionsForm = {
 beforeSubmit: showRequest,
 success: showResponseAll
 };
 
// bind to the form's submit event 
 $(this).submit(function() {
 $(this).ajaxSubmit(optionsForm);
 return false;
 });
 var $this = $(this);
 
// pre-submit callback 
 function showRequest(formData, jqForm, options) {
 $this.find('.rsform-submit-button').addClass('sending').text("Отправка....");
 }
 
// Validation Fields
 var requiredField = $this.find('.required-field input');
 requiredField.change(function() {
 $(this).next().hide();
 $(this).removeClass('rsform-error');
 });
 
// post-submit callback
 function showResponseAll(responseText, statusText, xhr, $form) {
 if ($this.find('.formError').is(":visible")) {
 $this.find('.rsform-submit-button').removeClass('sending').text("Отправить");
 } else if ($this.find('.required-field input').val() == '') {
 requiredField.addClass('rsform-error');
 requiredField.next().addClass('formError').show();
 $this.find('.rsform-submit-button').removeClass('sending').text("Отправить");
 } else {
 $this[0].reset();
 $this.find('.hide-form-success').slideUp().delay(4000).slideDown();
 $this.find('.rsform-submit-button').removeClass('sending').text("Отправить");
 $this.find('.hide-form-success').after('<div class="sys-messages"></div>');
 $this.find('.sys-messages').html('<h5 class="success-title">' + options.successTitle + '</h5><p class = "success-text" >' + options.successText + '</p>');
 setTimeout(function() {
 $this.find('.sys-messages').fadeOut().delay(2000).remove();
 }, 4000);
 }
 }
 }
 return this.each(make);
 };
})(jQuery);

На этом все. На связи был Заур Магомедов. Надеюсь материал из данной статьи вам пригодится. Возникнут вопросы обязательно задавайте их в комментариях.

До новых встреч!

Пост был обновлен: Сен 27, 2016

Заур Магомедов
Заур Магомедов

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

У меня вы можете:

Оцените пост:

1 балл2 балла3 балла4 балла5 баллов (1 оценок, среднее: 5,00 из 5)
Загрузка...

Проверка орфографии

Система Orphus

61 комментариев к статье "RSForm — ajax отправка форм без перезагрузки страницы"

  • Константин Июл 10, 2017 в 17:25

    Заур Доброго времени суток, можете помочь в настройке почты, а именно, как сделать что бы при отправке письма юзером (пользователем) выводилась информация с какой именно страницы были отправлены данные, стоит у меня версия 1.51 увы ставил 1.52 по вашему методу с заменой кода (НЕ РАБОТАЕТ) происходит конфликт, проблема с валеидацией, а именно не выводиться сообщение об ошибке ввода полей. Сам валидатор работает и не допускает отправку без информации, но вывод ошибок крассных сообщений не работает. И еще вопрос по поводу вашей демки, какая версия джумлы у Вас стоит и какая версия RSForm ? Скорее всего версия вашей демки 1.51 , а вот 1.52 увы нет, что бы видеть через исходный код что конкретно лежит в ваших файлах JS. И еще как на счёт версии 1.51 будет ли она конфликтовать с будущими более ранними версиями джумлы? За ранее спасибо!

    • Заур Магомедов
      Заур Магомедов Июл 10, 2017 в 22:24

      Здравствуйте! Заголовок получить можно. На счет валидации и отправки формы — да в новой версии rsForm произошли измзенения и код отправки нужно переписать. Здесь получается так, что данный код нужно корректировать под каждую разметку html кода формы. Универсального кода я написать не могу к сожалению. Я обновил rsForm до 1.52.x и форма перестала работать. Надо разбираться. Сейчас этим заниматься, если честно времени нет.

      • Константин Июл 13, 2017 в 16:02

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

        • Заур Магомедов
          Заур Магомедов Июл 13, 2017 в 19:04

          Можно получить заголовок страницы или заголовок H1. Делается это на javaScript. Предварительно создаете скрытое поле в форме и задаете id, например — pageTitle. Добавляете данное поле в разметку страницы.

          <script>
              jQuery(document).ready(function($){
          	    var pageTitle = $('.page__title').text(); // Класс заголовка страницы
          	    $('input#pageTitle').val(pageTitle); // Подставляем значение заголовка в скрытое поле формы
              });	
          </script>
          

          В e-mail администратора в поле «Тема» вбиваете примерно следующее: Заказан звонок со страницы — {pageTitle:value}

          • Константин Июл 17, 2017 в 23:23

            Отлично, да это сработало заголовок подтягивается без проблем. Еще вопрос на счёт конфликта двух форм на сайте, версия 1.51 Пример, на странице 2 разные формы RSForm с разными id, первая форма отправляется с AJAX вторая уже нет, проверял настройки все одинаковы что на первой что на второй форме, но вот вторая форма отправляться с АЯКСОМ не хочет, ставил и одну и туже форму модулем 2 раза на странице, та же самая ситуация, первая форма с АЯКСОМ вторая нет, сталкивались ли вы с такой проблемой???

            • Заур Магомедов
              Заур Магомедов Июл 17, 2017 в 23:30

              А вы второй форме вызывали ajax отправку, как первой — $(‘#idForm’).sendForm();?

              • Константин Июл 18, 2017 в 10:13

                В смысле? Я и к первой не вызывал $(‘#idForm’).sendForm(); Просто обернул форму в класс class=»hide-form-success» и подключил нужные скрипты и всё, а по поводу $(‘#idForm’).sendForm(); писать в инит JS ? или просто в castom js ?

                • Заур Магомедов
                  Заур Магомедов Июл 18, 2017 в 17:27

                  Без вызова у вас ajax работать не будет. Скорее всего вызывали, посмотрите…

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

Войти с помощью: 

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

Если вы хотите вставить в текст комментария код HTML, CSS, PHP, JavaScript, то обрамите код в соответствии необходимыми тегами:

  • Код HTML - тегами [html] ваш код... [/html]
  • Код CSS - тегами [css] ваш код... [/css]
  • Код PHP - тегами [php] ваш код... [/php]
  • Код JavaScript - тегами [code lang="js"] ваш код... [/code]