В этом посте я расскажу, как реализовать отправку сообщения RSForm без перезагрузки страницы. RSForm — это компонент для создания различных форм на Joomla — сайтах. Для этого мы будем использовать технологию Ajax.
- Итак, для начала создадим и настроим настроим саму форму. Для этого создаём необходимые поля (думаю с этим вы справитесь самостоятельно) и идём в настройки самой RS-формы.
Нужные настройки указаны на скриншоте:
В принципе на скриншоте понятно, что надо «жать». Главное — нам нужно разрешить использовать AJAX-проверку.
2. Далее нам понадобится подключить небольшой jQuery скрипт в исходный код страницы.
Код скрипта следующий:
<script>
jQuery(document).ready(function() {
jQuery('#ajaxrsform form').submit(function() {
var data = jQuery(this).serialize();
jQuery.post(jQuery(this).attr("action"),data,function(data,status){
if(status=='success'){
if(jQuery(data).find("#ajaxrs").find("form").html() == undefined)
{
jQuery("#ajaxrs").html(jQuery(data).find("#ajaxrs").html());
}
}
});
return false;
});
});
</script>
Конечно же надо не забыть подключить саму библиотеку jQuery к шаблону. В Joomla выше 3-й версии она уже подключена, так что с этим проблем быть не должно.
3. Завершающий этап. Оборачиваем нашу форму в шаблоне в блок div с произвольным уникальным id:
<div id="ajaxrs">
тут код формы в модуле, плагине или простом HTML
</div>
Всё. Сохраняем, перезагружаем и проверяем. Всё должно работать отлично. Единственная сложность может возникнуть, если в форме есть поля, предназначенные для загрузки файлов.
Кратко поясню, как работает данный код.
- С помощью jQuery, скрипт обрабатывает событие submit (клик по кнопке «Отправить»)
- Далее скрипт получает URL, по которому происходит отправка данных формы
- В случае успеха, получаем соответствующее сообщение после отправки.
Кстати говоря, этот способ работает и во всплывающем окне (lightbox). Т.е. можно заставить работать форму RSForm во всплывающем окне без перезагрузки страницы.
Я часто использую фреймворк UIKIT. Для него такой код будет выглядеть следующим образом:
<!-- вставка кнопки для открытия формы -->
<a href="#my-id" data-uk-modal>...</a>
<!— код модального окна —>
<div id=»my-id» class=»uk-modal»>
<div class=»uk-modal-dialog»>
<a class=»uk-modal-close uk-close»></a>
Здесь модуль с нашей формой, обёрнутый в блок div, как писалось выше
</div>
</div>
Надеюсь, этот пост вам поможет. Успехов!
Спасибо за статью.
А удалось ли вам подружить RSform и цели в метрике?
Пока не занимался этим вопросом, но в планах есть. Если будут какие-то результаты, поделюсь ими в блоге.
Спасибо за ман!
Скажите, как скрыть саму форму и вывести блок с нужным ID на время отправки запроса?
Т.е. я хочу что бы пока идет запрос выводился прелоадер, а то в данном случае человек не понимает, происходит что то или нет.
Погуглив нашел что нужно обрабатывать событие ajaxSend но у меня не вышло, блок выводится вместе с сообщением благодарности и не срывается.
А у меня не получилося!
Ничего не случаеться, К ссілке прибавляеться ид и все на єтом. Пробывл в index.php вставить
Здесь модуль с нашей формой, обёрнутый в блок div, как писалось выше
и вызвать его
a href=»#my-id» rel=»nofollow»…/a
Все заработало. Если обворачиваю
В rsform то не срабатівает
Добрый день!
Хорошая статья! Спасибо!
А не могли подсказать, как можно еще немного модифицировать jQuery script-код для того, чтобы прикрепление файлов в форме RSform тоже работало ajax?
А то именно поле File не передает ни значения, ни данные.
Заранее спасибо за помощь!
С этим моментом не разбирался. Но именно с «аттачами» к форме там не всё так просто и об этом я упоминал в статье. Если найду решение, обязательно добавлю в текст.
приветствую
пробую подключить данное решение у себя на сайте.. увы не работает
скрипт вставляю в head как есть у вас на странице
форма реализована на ui kit
Азия
{rsform 8}
но увы не работает.. что может быть не так?
а в этой строке нет ошибки?
jQuery(‘#ajaxrsform form’).submit(function() {
Я делаю форму из трех столбцов. На настольном компьютере динамики отображаются в ряд (правильно!), а на мобильном телефоне динамики отображаются друг под другом (неправильно!). как исправить ситуацию, чтобы они отображались в одну строку на мобильном телефоне? :?: