В шаблоне вставляем вот так:
<div id="ajaxForm">
{{eFeedbackForm}}
</div>
<script type="text/javascript">
$(document).on('submit','#ajaxForm form',function(ev){
var frm = $('#ajaxForm form');
$.ajax({
type: 'post',
url: '/feedbackajaxform',
data: frm.serialize(),
success: function (data) {
$('ajaxForm form').remove();
$('#ajaxForm').html( data );
}
});
ev.preventDefault();
});
</script>
само собой скрипт ставим после вызова jquery, так же его можно вынести вообще в файлик. Основное тут это оберуть форму в емемент с id=«ajaxForm», если несколько форм на страничке то тоже не проблема :) просто меняем на нужные в копии скрипта.
И создаем плагин AjaxEvo с событием на OnPageNotFound:
switch($_GET['q']){
case 'feedbackajaxform':
echo $modx->runSnippet('eForm', array(
'formid' => 'feedbackForm',
'subject' => 'Заказ с сайта ' . $modx->config['site_name'] ,
'tpl' => 'eFeedbackForm',
'report' => 'eFeedbackReport',
'forvericodemid' => '0',
'vericode' => '0',
'thankyou' => 'thankyou',
'to' => $modx->config['cfg_email'] ));
die();
break;
}
Далее для красоты добавляем классы в css для ошибок и обязательных полей для заполнения и получаем идеально работающую Форму на ajax с валидацие полей и минимум лишних скриптов :)
Андрей Казунин 11.10.2016 16:26 #
Dmi3yy 11.10.2016 16:27 #
Алексей Либер 18.10.2016 19:26 #
Dmi3yy 18.10.2016 19:38 #
Никита 30.07.2018 23:19 #
Uncaught TypeError: Cannot read property 'getAttribute' of undefined
Dmi3yy 01.08.2018 16:49 #