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

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

10 372 в Joomla 89

Здравствуйте дорогие друзья! В данной статье хочу показать, как можно отправлять данные из формы компонента 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.

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

Читайте также:  Панель управления Joomla 2.5. Перевод Joomla 2.5 на русский язык
<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

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

Читайте также:  Вертикально-выпадающее меню аккордеон для Joomla 2.5.x - 3.x.x

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

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

/* =============================================================
    
                            Ajax Submit Form Plugin
 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),
                btn = $this.find('.rsform-submit-button');

            // pre-submit callback 
            function showRequest(formData, jqForm, options) {
                btn.addClass('sending').text("Отправка....");
            }
            // post-submit callback
            function showResponseAll(responseText, statusText, xhr, $form) {
                var requiredField = $this.find('.required-field input, .required-field textarea');

                // Удаляем подсветку ошибки при заполнении поля
                requiredField.change(function() {
                    $(this).next().hide();
                    $(this).removeClass('rsform-error');
                });

                // Удаляем сласс sending у кнопки, если поля не заполнены
                if ($this.find('.formError').is(":visible")) {
                    btn.removeClass('sending').text("Отправить");
                }

                $this.find(requiredField).addClass('rsform-error');

                // Проверки полей формы
                $this.find(requiredField).each(function(){
                    if($(this).val() != ''){
                        $(this).next().removeClass('formError').hide();
                        $(this).removeClass('rsform-error');
                    } else {
                        $(this).next().addClass('formError').show();
                        $(this).addClass('rsform-error');
                    }
                });

                var errorField = $this.find('.rsform-error').size();
                if(errorField > 0){
                    btn.removeClass('sending').text("Отправить");
                    return false
                }

                if(requiredField.hasClass('rsform-error')){
                    return false
                } else {
                    $this[0].reset();
                    $this.find('.hide-form-success').slideUp().delay(4000).slideDown();
                    btn.removeClass('sending').text("Отправить");
                    $this.find(requiredField).removeClass('rsform-error');
                    $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);

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

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

Оцените пост
5 оценок, среднее: 4,20 из 5
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...
Заур Магомедов
Заур Магомедов
Занимаюсь созданием сайтов с 2009 года. Постоянно обучаюсь и совершенствуюсь, шагая в ногу со временем. Владею такими навыками, как: Html5, Css3, jQuery, JavaScript, БЭМ, Gulp.
Другие материалы той же категории