AJAX форма на jQuery

В файле нужного нам шаблона создаем форму через объект. Можно также сделать форму просто html кодом, главное, чтобы названия полей совпадали с теми, которые потом будут использоваться далее в файле views/ajax/request.php

<?
//Создаем ajax csrf токен до любого вывода html на странице
$ajax_csrf_token = Form :: createAndDisplayAjaxTokenCSRF();

$fields = array(array("Имя", "char", "name", array("required" => true)),
                array("Телефон", "phone", "phone"),
                array("Email", "email", "email", array("required" => true)),
                array("Комментарий", "text", "comment"));

$form = new Form($fields);

include $mv -> views_path."main-header.php";
?>
<script type="text/javascript"> var rootPath = "<? echo $mv -> root_path; ?>"; </script>
<script type="text/javascript" src="<? echo $mv -> media_path; ?>js/jquery.js"></script>
<script type="text/javascript" src="<? echo $mv -> media_path; ?>js/utils.js"></script>

<div id="modal-request">
    <form>
        <? echo $form -> displayVertical(); ?>
        <div class="form-buttons">
            <? echo $ajax_csrf_token; ?>
            <button id="send-request">Отправить</button>
        </div>
    </form>
</div>

<? 
include $mv -> views_path."main-footer.php";
?>

В файле media/js/utils.js пишем код на jQuery для обработки формы.

$(document).ready(function()
{
    $("#send-request").on("click", function()
    {
        $.ajax({
            type: "POST",
            dataType: "html",
            url: rootPath + "views/ajax/request.php",
            data: $("#modal-request form").serialize(),
            success: function(data)
            {
                $("#modal-request div.form-errors").remove();
                
                if(data != "done")
                    $(data).insertBefore($("#modal-request form"));
                else
                {
                    var message = "Ваш запрос был успешно отправлен.";
                    $("#modal-request form").replaceWith("<div class=\"form-success\"><p>" + message + "</p></div>");
                }
            }
        });
    });
});

Создаем файл для обработки AJAX запроса views/ajax/request.php

<?
//Проверяем, что запрос был отправлен через AJAX jQuery
if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']))
    exit();

include "../../config/autoload.php";
$mv = new Builder();

if(!empty($_POST))
{        
    $fields = array(array("Имя", "char", "name", array("required" => true)),
                    array("Телефон", "phone", "phone"),
                    array("Email", "email", "email", array("required" => true)),
                    array("Комментарий", "text", "comment"));
        
    $form = new Form($fields);

    //Токен проверяется автоматически, главное чтобы он был выведен в html форме
    $form -> useAjaxTokenCSRF();
    $form -> getDataFromPost() -> validate();
        
    if($form -> isValid())
    {
        $message = $form -> composeMessage();
        Email :: send("email@example.com", "Сообщение с сайта", $message);

        echo "done";
    }
    else
        echo $form -> displayErrors();
}
?>