Отправка сообщений из форм через ajax

Исторический материал из архива сайта. Указанные услуги и контакты относятся ко времени публикации и не являются действующим предложением.

Создание сайтов

Создание сайтов - отличный способ поддержать бренд уже известной компании, а также заявить о себе на стадии Start-Up. Доверьте создание сайта профессионалам и Ваш сайт станет источником увеличения прибыли компании.

Подробнее

Продвижение сайтов

Интернет-агентство ТОП10 предлагает воспользоваться услугами оптимизации сайтов, а именно продвижением сайтов в поисковых системах и контекстной рекламой, так как благодаря этому Ваш сайт найдут.

Подробнее

Тех. поддержка

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

Подробнее

Постоев Олег

15.09.201317:5615 Сентября 2013 17:56

Постановка задачи: при отправке данных с формы пользователь должен оставаться на той же странице, а во всплывающем окне должно показываться сообщение об успешной отправке.
Такую задачу недавно поставил клиент по технической поддержке сайта.
В общих чертах решение задачи кажется следующим:

Через AJAX загружаем страницу с формой
Анализируем содержимое
Выводим соответствующее окно (в нашем случае это был fancybox

И так по порядку, со всеми подводными камнями:

Для того что бы определить результат обработки AJAX выделим области с выводом ошибки и сообщения в шаблоне компонента "bitrix:form.result.new":

Код

<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
<?if($arResult["isFormErrors"] == "Y" && $arResult["FORM_ERRORS_TEXT"]):?>
   <a href="#form-errors" class="form-errors fancybox-mes">Ошибки формы</a>
   <div><div id="form-errors"><?=$arResult["FORM_ERRORS_TEXT"];?></div></div>
<?endif;?>

<?if($arResult["FORM_NOTE"]):?>
   <a href="#form-note" class="form-note fancybox-mes">Сообщение из формы</a>
   <div><div id="form-note"><?=$arResult["FORM_NOTE"]?></div></div>
<?endif;?>

<?if($arResult["isFormNote"] != "Y" && $arResult["isFormErrors"] != "Y" && !$arResult["FORM_ERRORS_TEXT"] && !$arResult["FORM_NOTE"]):?> 
...

Нужно помнить что страница обработки формы должна находиться на странице формы, т.е. параметры компонента примерно такие:

Код

<?$APPLICATION->IncludeComponent(
   "bitrix:form.result.new",
   "ask-a-question",
   Array(
      "WEB_FORM_ID" => "72",
      "IGNORE_CUSTOM_TEMPLATE" => "Y",
      "USE_EXTENDED_ERRORS" => "N",
      "SEF_MODE" => "N",
      "CACHE_TYPE" => "A",
      "CACHE_TIME" => "3600",
      "LIST_URL" => "",
      "EDIT_URL" => "",
      "SUCCESS_URL" => "",
      "CHAIN_ITEM_TEXT" => "",
      "CHAIN_ITEM_LINK" => "",
      "VARIABLE_ALIASES" => Array(
         "WEB_FORM_ID" => "WEB_FORM_ID",
         "RESULT_ID" => "RESULT_ID"
      )
   )
);?>

Еще такой момент - что бы подгружаемый скрипт выполнялся лишь один раз, а не при каждом выполнении AJAX запроса (была ситуация, что (form).submit(); срабатывал 2, 4, 8 раз...):
1. Называем его как-нибудь, только не script.js, например "script-ajax.js"
2. Подключаем скрипт вручную в шаблоне:

Код

<?if($arResult["isFormNote"] != "Y" && $arResult["isFormErrors"] != "Y" && !$arResult["FORM_ERRORS_TEXT"] && !$arResult["FORM_NOTE"]):?> 
   <div class="form-ask"> 
      ... 
   </div>
   <div id="show-message-lightbox" class="show-message-lightbox"></div>
   <script type="text/javascript" src="<?=$templateFolder;?>/script-ajax.js"></script>
<?endif;?>

Далее, есть такой момент - при неправильном заполнении формы пользователю должно выдаться сообщение об этом и параллельно Битрикс (автоматом) сбрасывает капчу. То есть её в форме необходимо будет обновить, поэтому создаю файл в /bitrix/tools/captcha_ajax.php с кодом:

Код

<?
   require($_SERVER["DOCUMENT_ROOT"]."/bitrix/modules/main/include/prolog_before.php");
   echo $code=$APPLICATION->CaptchaGetCode();
?>

По AJAX запросу этот код сгенерирует ключ для новой капчи. Запрос сделаем в файле script-ajax.js, код которого заключим в прелоадер (не знаю, как еще это назвать):

Код

$(document).ready(function () {  
   ...
});

В итоге наш код JS-скрипта разделится на 3 части - отправка данных формы, обновление капчи на странице и настройки всплывающего окна fancybox.
Итак, первая часть, самая сложная и важная:

Код

   // Отправка AJAX запроса
   $('.form-ask form').submit(function(e) {      // Обработка отправки данных формы
      e.preventDefault();                  // Сброс стандартного обработчика формы
      formData = $(this).serialize() + "&web_form_submit=Отправить";   // Сохраняем массив введенных данных включая значение кнопки "Отправить", без этого компонент Битрикса не примет данные
      
      $.post(      // Отправим POST запрос серверу
         $(this).attr('action') + '?AJAX_REQUEST=Y',   // Текущая страница с дописанным параметром - по нему подключается пустой шаблон с одним #WORK_AREA#
         formData,
         function(response){
            var message = $("#show-message-lightbox").html(response);         // Сохраняем загруженные данные на странице в невидимом блоке

            if(message.find(".fancybox-mes").length) {                        // Если в этих данных есть элементы для показа (ошибка или сообщение)
               var fancy_html = $(message.find(".fancybox-mes + div")).html();
               $.fancybox({content: fancy_html});
               captcha_update();         // Сбросим капчу в форме
            }

            if(message.find(".form-note").length) {   // Если данные формы приняты сбросим все поля
               $('.form-ask input').val(" ");
               $('.form-ask textarea').val(" ");
            }
         }
      );

      return false;
   });

Основные строки я здесь прокомментировал. Посмотрим на функцию обновления капчи:

Код

   // Обновить капчу
   function captcha_update() {
      $.ajax({
         url: "/bitrix/tools/captcha_ajax.php",
         success: function(data){
            $(".form-ask form").find('.antispam input[name="captcha_sid"]').val(data);
            $(".form-ask form").find('.antispam input[name="captcha_sid"] + img').attr("src", "/bitrix/tools/captcha.php?captcha_sid="+data);
         }
      });
   }

Тут всё просто и понятно без комментариев. Дальше код настроек всплывающего окна fancybox, код тоже примитивен, комментировать не буду, привожу для общего понимания картины:

Код

   // Настройки всплывающего окна
   $(".fancybox-mes").fancybox({
      "type": "iframe",
      "padding": 10,
      "imageScale": false,
      "zoomOpacity": false,
      "zoomSpeedIn": 1000,
      "zoomSpeedOut": 1000,
      "width": 525,
      "height": 300,
      "overlayShow": true,
      "overlayOpacity": 0.8,
      "hideOnContentClick": false,
      "centerOnScroll": true
   });

Ну вот. Теперь данные формы успешно отправляются с помощью AJAX

Постоев Олег

15.09.201317:5615 Сентября 2013 17:56

Просмотров:3666 Комментариев:1 0

Теги: AJAX, bitrix, шаблон компонента, javascript, fancybox, всплывающее окно

Ваше имя*

E-mail

Тема

Добавить файлы

Загрузить файлы

#name#

#size#