Ajax отправка формы в Битрикс

В основном скрипте

$(document).ready(function() {    
    $('.main__form-wrapper form').submit(function(e) {
        e.preventDefault();
        
        $('span.error').remove();
        
        let name = $(this).find('#input-name').val();
        let phone = $(this).find('#input-phone').val();
        let email = $(this).find('#input-email').val();
        let formName = $(this).attr('name');
        let parentClass = $(this).parent().parent().parent().attr('class').split(' ');
         
        let approve = true;
        
        if (name.length < 1 && name != undefined) {
            $(this).find('#input-name').next().next().after('<span class="error"><img src="/local/templates/alift/img/input-info.svg" /> Пожалуйста заполните поле</span>');
            approve = false;
        }
        
        if (phone != undefined) {
            if (phone.length < 1) {
                $(this).find('#input-phone').next().next().after('<span class="error"><img src="/local/templates/alift/img/input-info.svg" /> Пожалуйста заполните поле</span>');
                approve = false;
            } else {
                var regEx = /^\+?[78][-\(]?\d{3}\)?-?\d{3}-?\d{2}-?\d{2}$/;
                var validEmail = regEx.test(phone);
                
                if (!validEmail) {
                    $(this).find('#input-phone').next().next().after('<span class="error"><img src="/local/templates/alift/img/input-info.svg" /> Введите правильный телефон</span>');
                    approve = false;
                }
            }
        }
        
        if (email != undefined) {
            if (email.length < 1) {
                $('#input-email').next().next().after('<span class="error"><img src="/local/templates/alift/img/input-info.svg" /> Пожалуйста заполните поле</span>');
                approve = false;
            } else {
                var regEx = /^[\w-\.]+@[\w-]+\.[a-z]{2,4}$/i;
                var validEmail = regEx.test(email);
                
                if (!validEmail) {
                    $('#input-email').next().next().after('<span class="error"><img src="/local/templates/alift/img/input-info.svg" /> Введите правильный Email</span>');
                    approve = false;
                }
            }
        }
        
        if (approve) {
            ajaxForm(document.getElementsByName(formName)[0], '/local/ajax/ajax-form.php', parentClass[1]);
            $('.' + parentClass[1] + ' .success-message').css('display', 'block');
        }
    });
});

/**
* Функция обработки Ajax запроса формы
*/
function ajaxForm(obForm, link, domclass) {
    let xhr = new XMLHttpRequest();
    xhr.open('POST', link);

    xhr.onload = function() {
        if (xhr.status != 200) {
            alert(`Ошибка ${xhr.status}: ${xhr.statusText}`);
        } else {
            var json = JSON.parse(xhr.responseText)

            if (! json.success) {
                let errorStr = '';
                for (let fieldKey in json.errors) {
                    errorStr += json.errors[fieldKey] + '<br>';
                }
                 
                // Ошибки вывести в элемент с классом error-msg
                //obForm.getElementsByClassName('error-msg')[0].innerHTML = errorStr;
            } else {
                // Показываем сообщение об успешной отправке
                obForm.innerHTML = '';
                document.querySelectorAll('.' + domclass + ' .request-call__desc')[0].innerHTML = 'Спасибо, ваша заявка успешно отправлена!';
                //document.querySelectorAll('.' + domclass + ' .success-message').style.display = 'block';
                // popupSuccess()
            }
        }
    };

    xhr.onerror = function() {
        alert("Запрос не удался");
    };

    // Передаем все данные из формы
    xhr.send(new FormData(obForm));
}

Создаем php файл-обработчик в папке /local/ajax-form.php

<?php
require $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/prolog_before.php';
 
// Подключаем модуль веб-форм
CModule::IncludeModule("form");
 
// Проверка валидности отправки формы
if (check_bitrix_sessid()) {
    $formErrors = CForm::Check($_POST['WEB_FORM_ID'], $_REQUEST, false, "Y", 'Y');
 
    // Если не все обязательные поля заполнены
    if (count($formErrors)) {
        echo json_encode(['success' => false, 'errors' => $formErrors]);
    } elseif ($RESULT_ID = CFormResult::Add($_POST['WEB_FORM_ID'], $_REQUEST)) {
 
        // Отправляем все события как в компоненте веб форм
        CFormCRM::onResultAdded($_POST['WEB_FORM_ID'], $RESULT_ID);
        CFormResult::SetEvent($RESULT_ID);
        CFormResult::Mail($RESULT_ID);
 
        // говорим что успешно заявку получили
        echo json_encode(['success' => true, 'errors' => []]);
    } else {
        // Какие-то еще ошибки произошли
        echo json_encode(['success' => false, 'errors' => $GLOBALS["strError"]]);
    }
} else {
    // Предотвратили CSRF атаку
    echo json_encode(['success' => false, 'errors' => ['sessid' => 'Не верная сессия. Попробуйте обновить страницу']]);
}
 
// Файл ниже подключать обязательно, там закрытие соединения с базой данных
require $_SERVER['DOCUMENT_ROOT'] . '/bitrix/modules/main/include/epilog_after.php';
Show CommentsClose Comments

Leave a comment