RSForm без перезагрузки на Ajax

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

  1. Итак, для начала создадим и настроим настроим саму форму. Для этого создаём необходимые поля (думаю с этим вы справитесь самостоятельно) и идём в настройки самой RS-формы.

Нужные настройки указаны на скриншоте:

RSForm без перезагрузки страницы

В принципе на скриншоте понятно, что надо «жать». Главное — нам нужно разрешить использовать 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>

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

Кратко поясню, как работает данный код.

  1. С помощью jQuery, скрипт обрабатывает событие submit (клик по кнопке «Отправить»)
  2. Далее скрипт получает URL, по которому происходит отправка данных формы
  3. В случае успеха, получаем соответствующее сообщение после отправки.

Кстати говоря, этот способ работает и во всплывающем окне (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>

Надеюсь, этот пост вам поможет. Успехов!

Понравилась статья? Поделить с друзьями:
Комментариев: 8
  1. Денис

    Спасибо за статью.

    А удалось ли вам подружить RSform и цели в метрике?

  2. Haskin (автор)

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

  3. Андрей

    Спасибо за ман!
    Скажите, как скрыть саму форму и вывести блок с нужным ID на время отправки запроса?
    Т.е. я хочу что бы пока идет запрос выводился прелоадер, а то в данном случае человек не понимает, происходит что то или нет.
    Погуглив нашел что нужно обрабатывать событие ajaxSend но у меня не вышло, блок выводится вместе с сообщением благодарности и не срывается.

  4. Игорь

    А у меня не получилося!
    Ничего не случаеться, К ссілке прибавляеться ид и все на єтом. Пробывл в index.php вставить


    Здесь модуль с нашей формой, обёрнутый в блок div, как писалось выше

    и вызвать его
    a href=»#my-id» rel=»nofollow»…/a

    Все заработало. Если обворачиваю
    В rsform то не срабатівает

  5. Николай

    Добрый день!
    Хорошая статья! Спасибо!
    А не могли подсказать, как можно еще немного модифицировать jQuery script-код для того, чтобы прикрепление файлов в форме RSform тоже работало ajax?
    А то именно поле File не передает ни значения, ни данные.
    Заранее спасибо за помощь!

  6. Haskin (автор)

    С этим моментом не разбирался. Но именно с «аттачами» к форме там не всё так просто и об этом я упоминал в статье. Если найду решение, обязательно добавлю в текст.

  7. Наталья

    приветствую
    пробую подключить данное решение у себя на сайте.. увы не работает
    скрипт вставляю в head как есть у вас на странице
    форма реализована на ui kit

    Азия
    {rsform 8}

    но увы не работает.. что может быть не так?

    а в этой строке нет ошибки?
    jQuery(‘#ajaxrsform form’).submit(function() {

  8. Михаил Белендрясов

    Я делаю форму из трех столбцов. На настольном компьютере динамики отображаются в ряд (правильно!), а на мобильном телефоне динамики отображаются друг под другом (неправильно!). как исправить ситуацию, чтобы они отображались в одну строку на мобильном телефоне? :?:

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

:) :D :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen:

Читайте ранее:
толерантность
Притча о правильном и толерантном воспитании или учение Просветляющей Лопаты

Закрыть