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

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

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
Дмитрий подскажите для конструкция 'replyTo'=> '[+email.value+]', необходим некий 'prepareProcess'=>'mailsaverFormLister'? или он отвечает за нечто другое. Пробовал разные значения для параметра 'replyTo' ('email', '[+email.value+]', '@CODE: [+email.value+]' и др.), все время получаю ошибку Invalid address: (Reply-To): **, письма отправляются но функционал ответить соответственно не работае.
avatar
Дмитрий, все сделал как написано у вас, создал плагин, чанк с формой, все работает, а если на странице несколько форм FormLister? Есть ли такое решение? Смотрел эту тему Но она у меня не работает, бьюсь над этим вопросом уже давно, думаю это много кому нужно
avatar
Дак сколько угодно форм может быть
Меняете обертку id

Или переписываете что б работало через this

Тогда можно и 1 форму использовать несколько раз
avatar
Спасибо за ответ Дмитрий, но в плагине же прописан шаблон формы, а у форм разные шаблоны, пробовал второй плагин, такой же но с другим шаблоном, не работает, если формы одинаковые, то проблем нет, конечно же
avatar
В плагине прописываете еще 1 case с нужным вызовом FormLister и обращаетесь через ajax к нему: ) и все будет работать
avatar
Продублировал в плагине case 'feedbackajaxform_2' с новым именем, вроде все работает, Спасибо большое, вот что значит не знать PHP ))
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
Однако прикольная штука, подключил, тестирую. Плюсую однозначно!
avatar
Я вот до сих пор не разобрался как этим пользоваться.
Можете подсказать, пожалуйста?
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.