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

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

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

Заур Магомедов
Главная » Приятные полезности для сайта » 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.

Читайте также:  Создаем всплывающие окна для сайта - Magnific Popup

Итак, качаем файлы по ссылке выше. В архиве лежат три файла: сама библиотека 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

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

Читайте также:  Стильное вертикальное меню аккордеон для сайта

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

/** Сообщение благодарности **/
.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

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

  • Пах Янв 20, 2017 в 15:02

    Заур! Молодца!
    Просто спас! Делал добавку материала с фронта, потратил на редакторы дней 10, все одно в тупик-косяк.
    Решил через форму, заткнулся на аяксе — а тут решение +5
    Ну +5 — не просто так 🙂 щя будут вопросики!
    Короче така я решила, делаю формуи css делаю макет материала с проверками всех полей и
    собственно выводы ошибок аяксом!
    Но по скольку RSForm Pro юзаю 2 дня еще не все вкурил.
    1. Я убрал кусок вашего скрипта на 4 секунды с выводом КУ! Мне не понравилось, не удобно. (ну на вкус и цвет как говориться)
    т.е щя просто перебрасывает на кнопку продолжить, а далее на указанный редирект вв форме.
    Вот как к этой кнопки, добавить еще пару кнопок.
    т.е одна будет типа так Добавить еще материал, вторая На главную.
    2. мне необходимо проверять текстовую строку форму на мин мах по кол-ву введенных символов.
    Тут не вопрос, просто нашел такую штуку, мож кому пригодиться.

    https://github.com/helloilya/jquery-countchar

    3. Погнали борзых дальше 🙂
    Ваша проверка работает только на Текстовое поле, но Текстовую область уже не работает, мне еще нужно на Загрузку файла.
    Может как время будет, разжуете немного скрипт. Просто не супер спец в js но немного могу.
    P.S Я, тут скрипт написал, что-бы у американцев рождались Русские дети! 🙂 Вот и все мои познания! 🙂
    Ладно усе!
    Спасибо за статью!

    • Заур Магомедов
      Заур Магомедов Янв 20, 2017 в 16:52

      На счет кнопок — это уже не к JS, а к PHP скорее всего. Кнопка продолжения выводится средствами RSFORM. На счет валидации поля File, то сам хотел бы решить эту проблему, но сколько я не ковырялся — не смог. Нужно с разработчиками переписываться. Вообще много гемороя получается с этим Ajax’ом. Для этих целей я пока использую другой компонент форм, с аяксом.

      • Пах Янв 20, 2017 в 17:13

        У вас моя почта есть, киньте КУ!
        Я, буду допиливать — Вариантов нет.
        Мож в пару — одна голова хорошо, две лучше!?
        А про гемор, конечно ясно — Сегодня сделал, через пол года забыл и привет — все по новой!

        • Заур Магомедов
          Заур Магомедов Янв 20, 2017 в 17:15

          Что такое КУ?

          • Пах Янв 20, 2017 в 17:23

            КУ == Привет Друг!
            🙂
            Кино — Джентльмены Удачи!
            🙂

            • Заур Магомедов
              Заур Магомедов Янв 20, 2017 в 17:25

              Чет не помню такого момента. А на почту что кинуть то?

              • Пах Янв 20, 2017 в 17:37

                Зароботался!
                Конечно!
                кин-дза-аза
                На почту просто мыло, буду крутить, если есть интерес, ну как я понял вы рсформ уже не сильно практикуете. А мне подуше пришелся. А ваше решение с аяксом мне работы то уменьшило хоросе, я как раз не понимал что форму то автоматом можно отключить и делать что хош!

                • Заур Магомедов
                  Заур Магомедов Янв 20, 2017 в 18:47

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

  • Зенков Андрей Дек 02, 2016 в 21:26

    Практичные советы, конечно, важнее всего. Отправка формы без перезагрузки страницы — вещь удобная. Не сразу получается к этому придти, но Заур довольно понятно расписал, у меня получилось. Первое время форма почему-то глючила, сама по себе отправляла запросы, но решение нашлось, теперь такого не замечаю. Каптча должна быть всё равно, я думаю. Всё же от спама она является защитой

    • Заур Магомедов
      Заур Магомедов Дек 02, 2016 в 23:09

      Честно сказать в данном варианте с каптчей сообщения не отправляются. Я использую в данном случае Akismet.

  • Алекс Июн 07, 2016 в 7:55

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

    • Заур Магомедов
      Заур Магомедов Июн 07, 2016 в 9:47

      Все должно работать. Дайте ссылку на сайт.

      • Алекс Июн 07, 2016 в 13:02

        Заработало, добавил скрипты в саму форму, до этого были просто в шаблоне.

        Спасибо

        • Заур Магомедов
          Заур Магомедов Июн 07, 2016 в 14:16

          В шаблоне тоже должно работать. Просто что то неправильно сделали.
          Не за что!

          • Алекс Июл 22, 2016 в 11:16

            Добрый день Заур
            как можно сделать мультиязычность?

            • Заур Магомедов
              Заур Магомедов Июл 22, 2016 в 11:50

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

              • Алекс Июл 27, 2016 в 13:20

                Здравствуйте Заур

                Форма стала как-то глючить, отправляет запросы через раз, некоторые запросы даже в базе не регистрируются, в чем можем быть проблема?

              • Алекс Июл 27, 2016 в 13:37

                Может это быть из-за SSL?

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

                  Не могу сказать. У меня такого не было. Попробуйте отключить ajax отправку и проверьте снова.

  • Артём мая 06, 2016 в 18:40

    Добрый день Заур, попробовал по вашему совету использовать Akismet, что сказать, спам все таки идет,одно письмо, раз в 3-4 дня проскакивает, это конечно не столь критично, но с рекаптчей такого не было.

    • Заур Магомедов
      Заур Магомедов мая 06, 2016 в 23:35

      Странно. У меня тут на блоге тоже стоит akismet — никакого спама нет. На демо-форме нет ни akismet, ни каптчи и спама нет. Ну не знаю, для решения этой проблемы нужно писать разработчикам RSForm. Я все же попробую данную проблему решить.

      • Артём мая 08, 2016 в 14:52

        Буду очень признателен вам.

  • Артём Апр 26, 2016 в 23:29

    Доброго времени суток, спасибо вам Заур за вашу статью, но что то там по поводу рекаптча 2.0, вопрос не решился ?

    • Заур Магомедов
      Заур Магомедов Апр 27, 2016 в 0:21

      Здравствуйте! Пока не смотрел. Честно говоря эта каптча 2.0 больше для красоты уже, чем для пользы, т.к. есть Akismet.

      • Артём Апр 27, 2016 в 9:33

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

  • Саша Апр 06, 2016 в 2:04

    Заур, ваш урок спасителен!!!

    Единственный момент, при не вводе / не верном вводе пользователем данных, форма все равно отправляется, что странно.

    Скажите, как это можно побороть?

    • Заур Магомедов
      Заур Магомедов Апр 06, 2016 в 9:06

      Включите ajax валидацию в настройках формы. Также можно включить валидацию на формат вводимых данных для каждого поля.

      • Саша Апр 06, 2016 в 12:16

        В том-то и дело, что Ajax валидация включена, ровно как и на полях.

  • Алексей Мар 14, 2016 в 20:38

    Здравствуйте, Заур.
    Свежее решение, но есть пара вопросов:
    — при ошибках поля формы не должны множиться на ноль. Человек имеет право на ошибку. И если он вам написал страницу текста и не правильно ввёл свой email, несправедливо его огорчать сообщением ВМЕСТО его текста.
    — при хорошем загрузе проверка акисмет может занимать время. Тут нужен либо значок loading…, либо капча.
    — после отправки формы она не должна снова появиться. «Спасибо» — и до перезагрузки страницы. Иначе боты оседлают 🙂

    • Заур Магомедов
      Заур Магомедов Мар 15, 2016 в 1:09

      По первому пункту согласен, исправлю.
      По поводу akismet — проблем еще не было, т.к. на данном блоге я тоже его использую. В качестве значка loading выступает текст на кнопке при ее отправке и кнопке задается определенный класс. Можно в css поколдовать. И каптчу вместо recaptcha 2 можно встроенную в рсформ использовать. С ней не должно быть проблем.
      Вопрос с показом формы после отправки — для ботов ведь нет разницы визуально форма показана или скрыта, в любом случае она есть в исходном коде.

      • Алексей Мар 15, 2016 в 2:22

        По последнему пункту как раз беседовал с Грейхэдом (chronoform). Это и была причина того, что он сознательно не делает аяксовую отправку.
        Ну а в остальном — всё ничтяк 🙂 Спасибо за статью !

        • Заур Магомедов
          Заур Магомедов Мар 15, 2016 в 11:03

          Неужели проблема сделать форму на ajax и еще защиту от ботов? Я думаю для таких разработчиков, которые выпускают такие расширения, как rsform и chronoform это не будет проблемой.
          По поводу рекаптча 2.0 я еще напишу автору rsform.

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

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

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

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

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