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(); } ?>