Ajax для сниппета FormLister

Выкладываю свой вариант работы с обычными ajax формами.

Описание
Генерация ajax запроса для сниппета FormLister на основе свёрстаной формы.

Настройка
  • Залить в корень сайта папку assets
  • Подключить библиотеку jquery (разработка велась на версии 3.2.1, но должно работать и на версиях пониже)
  • Подключить файл FLajax.js на сайте
  • В кнопке отправки формы прописать класс FLaja x
  • Для отслеживания статуса отправки в форму добавить тег с классом «FLresult»
  • Стилизировать has-error для полей
  • В ресурсе с id 1(главная страница) создать TV «mailto» и туда указать email получателя

Этих настроек должно хватить, чтобы запустить ajax обработку. Для более тонкой настройки загляните в файлы FLajax.js и FLconfig.php ;-)

Из настроек фильтра доступен только required. По умолчанию все поля обязательные, но можно для определённых полей указать required.

Ссылка github

9 комментариев

avatar
А зачем так сложно?


<div id="ajaxForm">
	{{ContactForm}}
</div>
<script type="text/javascript">
	//see plugin evoAjax
	 $(document).on('submit','#ajaxForm form',function(ev){
        var frm = $('#ajaxForm form');
        $('#submit').prop( "disabled", true );
        $.ajax({
            type: 'post',
            url: '[(site_url)]feedbackajaxform', 
            data: frm.serialize(),
            success: function (data) {
   				$('#ajaxForm').empty();
                $('#ajaxForm').html( data ); 
            }
        });
        ev.preventDefault();
    });
</script>
avatar
И плагин на 404

switch($_GET['q']){     
	case 'feedbackajaxform':
		echo $modx->runSnippet('FormLister', array(
			'debug'=>'1',
			'formid' => 'ContactForm',
			'prepareProcess'=>'mailsaverFormLister',
			'to' => $modx->config['emailsender'],
			'replyTo'=> '[+email.value+]',
			'subjectTpl' => '@CODE:[+subject.value+], from: ' . $modx->config['site_name'] ,
			'ccSender'=>'1',
			'errorClass'=> ' has-error',
			'requiredClass'=> ' has-warning',
			'rules'=> '{
               	"name":{
               		"required":"Enter your Name"
               	},
               	"email":{
               		"required":"Enter email",
               		"email":"Incorrect email"
               	},
               	"message":{
                	"required":"Enter message"
                }
            }',
			'formControls'=>'subject',
			'messagesTpl' => '@CODE:<div class="form-messages alert alert-danger">[+required+]
[+errors+]</div>',
            'errorTpl'=>'@CODE: [+message+]',
            'successTpl'=> '@CODE: 
             	<div class="alert alert-success mt-3">
                 	<h3>Thanks!</h3>
                 	<p>your message has been sent.</p>
             	</div>',
            'formTpl' => 'ContactForm', 
			'reportTpl'=>'ContactFormReport',
            'ccSenderTpl'=>'ContactFormReport',	
			));
			die();
        break;
}
avatar
А все понял суть но это не совсем Ajax для FL это более полноценное решение для отправки форм которые можно генерить на лету.
avatar
Именно, но это вариант для formlister
avatar
форма на странице есть, этого достаточно чтобы отправить эту форму аяксом на текущую страницу и получить ответ.
Валидация уже есть, зачем ещё одну делать?


var form = document.getElementById('form');
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action, true);
xhr.send(formData);

// можно заменить форму полученным ответом от сервера
console.log(xhr.response);
  • 64j
  • 0
avatar
Да и так можно. Ранее это был самопис, просто переделал обработку. Мне удобно так работать, уже на этапе вёрстке можно «натянуть» обработку формы
avatar
Сообщении на почту приходит в формате
: basic
Имя: 54654
E-mail/Телефон: 6546
:
Страница с запросом:

Хотелось бы узнать, как настроить вывод текста вместо basic и убрать вывод строки между E-mail/Телефон и Страница с запросом. Там находится строка с чекбоксом согласия. Добавление data-FL-name=«Согласие с политикой конфиденциальности» игнорируется
avatar
Поля с типом radio и checkbox, если не отмечены и не стоит required, игнорируются. Для них обязательно наличие атрибута value со значением. По поводу formid=«basic» дописал, он не обязателен, но если есть, то будет подставляться.
avatar
Однако прикольная штука, подключил, тестирую. Плюсую однозначно!
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.