Вывод модального окна после отправки формы?

Здравствуйте, подскажите пожалуйста как вывести сообщение об успешной отправке формы в модальном окне, а не просто в области сайта.
Использую такой код, взятый здесь же на форуме в связке с FormLister.
Пробовал прописывать в js вызов модального окна bootstrap 4, что-то вроде этого: $('#modal-thanks').modal('show'); Но безрезультатно, подскажите чтонужно дописать, а то с js у меня все плохо((

<div class="placeholder">[!FormLister? &formTpl=`@CODE:<form class="form"  id="form1" ...` ...!]</div>
<div class="placeholder">[!FormLister? &formTpl=`@CODE:<form class="form"  id="form2" ...` ...!]</div>
<script>        
$(function(){
  $(document).on("submit",".form",function(e){
   e.preventDefault();
   var form = $(this);
   var m_method=form.attr('method');
   var m_action=form.attr('action');
   var m_data=form.serialize();
   var parent = form.parents('.placeholder');
   var id = form.attr('id');
   $.ajax({
    type: m_method,
    url: m_action,
    data: m_data,
    resetForm: 'true',
    success: function(result){
     var data = $(result).find("#"+id)[0].outerHTML;
     parent.html(data);
    }
   });
  });
 });
</script> 

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

avatar
Я тоже не большой специалист по javascript, но var form = $(this); у тебе вроде как this указывает на кнопку «submit» в данном контексте!? В этом случаи у тебя не должен проходить ajax запрос. Можно проверить в инструментах разработчика в браузере.
avatar
нет. var form это указатель на элемент события в $(document).on(«submit»,".form",function(e){ т.е. .form
avatar
Точно, спасибо за разъяснения.
avatar
Простейший вариант — если на сайте еще не реализовано модальное окно, подключить fancybox и вместо
parent.html(data);

написать
$.fancybox.open(data);


Если реализовано (например, через bootstrap) — то по аналогии вызвать его :)
avatar
На случай приведенного $('#modal-thanks') — сначала надо вставить туда ответ
$('#modal-thanks').html(data);
а потом уже его «модалить»
$('#modal-thanks').modal('show');
все там же вместо
parent.html(data);
ну или после него
avatar
Сделал вот так:
<code>$.ajax({
				type: m_method,
				url: m_action,
				data: m_data,
				resetForm: 'true',
				success: function(result){
					var data = $(result).find("#"+id)[0].outerHTML;
					$('#modal-thanks').html(data);
					$('#modal-thanks').modal('show');
				}
			});</code>
Но почему-то не заработало, модальное окно находится в чанке, в FormLister имя чанка с модальным окном прописано в параметре &successTpl. Пробовал первую строчку в success и так: var data = $(result).find("#modal-thanks").html(); Тоже безрезультатно. Проверял вызовом работу модального окна напрямую размещая вызов в футере, срабатывает нормально, а при отправке формы не хочет. Не пойму где ошибка (
Комментарий отредактирован 2020-01-09 02:39:30 пользователем dokreg
avatar
Значит надо смотреть консоль браузера на предмет js-ошибок. Скорее всего, к моменту вызова $.ajax функция modal() еще не определена — т.к. файл bootstrap.min.js подключается позднее.
avatar
avatar
cсылка на комент как-то странно работает, вобщем, надо было прочитать все комменты. суть в том, что тут тоже надо id формы вставить:

&successTpl=`@CODE:<p id="здесь-id-вашей-формы">Спасибо! Мы свяжемся с Вами в ближайшее время!</p>`
avatar
Только я сейчас пошел иным методом, без всяких аяксов, но все формы во всплывающих окнах, на самой странице формы не размещаю, иначе спама много. Суть проста, делаю страницу с формой, закрываю ее от индексирования, вызываю ее через fancybox3 как фрейм:
<a data-fancybox data-type="iframe" data-small-btn="true" data-iframe='{"preload":false}' data-src="/form" href="javascript:;"> ЗАКАЗАТЬ</a>

И все.
Если же надо много форм с разными шаблонами, то на странице form делаем обертку сниппета FormLister, ловим в нем get параметр с именем шаблона и подставляем в сниппет. А название шаблона во фрейм передаем через get
data-src="/form?ftpl=ftpl1"


Может и топорно, но не должно быть спама, не нужен аякс, любое количество шаблонов, легко настраивается, защита от отправки нескольких разных форм с сайтав.
К тому же, через аякс есть сложности учета целей в метрике и гугле, которые я не смог победить. Так что нафиг этот аякс.
Правда минусом является то, что пользователь не видит сразу форму, а только по клику. С другой стороны, в блоках больше места для информации.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.