Bitrix отправка формы по ajax

26 сентября 2021 г.

У Bitrix имеется очень удобный компонент (main.feedback) для отправки произвольной формы с сайта . Удобен он тем, что довольно просто кастомизуется под любой дизайн и набор полей. Встроенный механизм «AJAX_MODE => Y» делает его еще универсальнее, добавляя возможность работы с ajax. Из минусов такой формы, пожалуй, только то, что мы получаем стандартный функционал и набор стилей и полей как, например, индикатор загрузки при отправке по ajax, с которыми побороться немного сложнее, и, в любом случае, форма обрабатывается своим component.php, где уже прописана логика обработки данной формы. Что бы форма и все обработки запросов были полностью под контролем, я обычно делаю свою обработку формы через ajax. Мне такой вариант подходит больше, т.к я могу прописать какую-то свою обработку ошибок и кастомных полей, загрузку файлов и запись в базу данных как мне удобно. Правда кода и работы немного больше получается. Вот небольшой пример как это сделать. Допустим есть форма:

<form class="form" action="<?=POST_FORM_ACTION_URI?>" method="POST" id="question_form">
    <?=bitrix_sessid_post()?>
    <input type="text" name="user_name" id="user_name" value="">
    <input type="text" name="user_company" id="user_company" value="">
    <input type="text" name="user_phone" id="user_phone" value="">
    <input type="text" name="user_email" id="user_email" value="">

    <input type="hidden" name="PARAMS_HASH" value="<?=$arResult["PARAMS_HASH"]?>">            
    <input class="button button__red" type="submit" name="submit" value="<?=GetMessage("MFT_SUBMIT")?>">
</form>

Подключим custom.js файл для обрабтки перехвата события отправки формы.

$("form#question_form").on("submit", function(e){ 
 var self = $(this);
 var data = new FormData();

 data.append("action", "question_form_request"); // пропишем параметр action, чтобы изолировать обработчик формы
 data.append("user_name", $("form#question_form #user_name").val());
 data.append("user_company", $("form#question_form #user_company").val());
 data.append("user_phone", $("form#question_form #user_phone").val());     
 data.append("user_email", $("form#question_form #user_email").val());

  $.ajax({
        url: "ajax_form.php", // укажем путь до файла обработчика
        type: "POST",
        dataType: "json",
        processData : false,
        contentType : false,
        data: data,            
            success: function (data) {
                 if(data.error) {
                       // обработка ошибок
                 } else {
                      // показываем сообщение об удачной отправки формы
                 }
         }
     }); 
    e.preventDefault(); 
});

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

<? require_once($_SERVER["DOCUMENT_ROOT"] . "/bitrix/modules/main/include/prolog_before.php");
if($_POST["action"] == "feedback_form_request" && CModule::IncludeModule("iblock")){

    $el = new CIBlockElement;

    $fio = htmlspecialchars($_POST["user_name"]);
    $company = htmlspecialchars($_POST["user_company"]);
    $phone = htmlspecialchars($_POST["user_phone"]);
    $city = htmlspecialchars($_POST["user_city"]);
    $email = htmlspecialchars($_POST["user_email"]);
    $file = $_POST["user_file"];

    if(strlen($fio) < 1){
        $req["error"]["error_text"][] = "Заполните поле ФИО";
    }       
    if(strlen($phone) < 1){
        $req["error"]["error_text"][] = "Заполните поле Телефон";
    }   
    if(strlen($city) < 1){
        $req["error"]["error_text"][] = "Заполните поле Город(регион)";
    }   
    if(strlen($email) < 1){
        $req["error"]["error_text"][] = "Заполните поле Email";
    }   

    if(!$req["error"]) {        

        $el = new CIBlockElement;   //создание экземпляра класса CIBlockElement

        if(is_array($_FILES["user_file"]) && !empty($_FILES["user_file"]["name"])){

            $file_ext = explode(".", $_FILES["user_file"]["name"]);            

            if($_FILES["user_file"]["size"] < 10485760 && in_array(end($file_ext), ["jpg", "png", "doc", "docx", "xls", "xlsx", "pdf"])){
                $fid_id = CFile::SaveFile($_FILES["user_file"], "feedback");
                $fid = CFile::MakeFileArray($fid_id);
                //$req["file"] = $fid . " / " . $fid_id;
            }else{
                $req["error"]["file"] = "Не верный формат файла или файл превышает объем 10Мб";
            }
        }

        $PROP = [];
        $PROP[332] = $company;  
        $PROP[333] = $phone;
        $PROP[334] = $email;
        $PROP[335] = $city;

        $arLoadProductArray = Array(           
            "IBLOCK_ID"      => "1",
            "PROPERTY_VALUES"=> $PROP,
            "NAME"           => $fio,
            "ACTIVE"         => "N",
            "PREVIEW_PICTURE" => $fid,
        );

        if($PRODUCT_ID = $el->Add($arLoadProductArray)) {
            $req = [
                "error" => false,
                "elem_id" => $PRODUCT_ID,
                "elem_name" => $fio,
            ];

            $arEventFields = [
                "AUTHOR" => $fio,
                "USER_COMPANY" => $company,
                "USER_PHONE" => $phone,
                "AUTHOR_EMAIL" => $email,
                "AUTHOR_CITY" => $city      
            ];

            if(CEvent::Send("FEEDBACK_FORM", "s1", $arEventFields, "N", "42", [$fid_id])) {
                $req = [
                    "error" => false
                ];
            }else{
                $req = [
                    "error" => true,
                    "error_text" => "Ошибка отправки письма"
                ];
            }
        }
    }
    echo \Bitrix\Main\Web\Json::decode($req);
}?>

Комментарии(0)