[РЕШЕНО] Несколько аякс форм на странице с одним обработчиком

На сайте несколько аякс форм на странице

<div id="ajax1">[!FormLister? &formid=`form1` ...!]</div>
<div id="ajax2">[!FormLister? &formid=`form2` ...!]</div>


и т.д.

Соответственно, для каждой формы использую такой обработчик:


$(function(){
	$(document).on("submit","#form1",function(e){
		e.preventDefault();
		var m_method=$(this).attr('method');
		var m_action=$(this).attr('action');
		var m_data=$(this).serialize();
		$.ajax({
			type: m_method,
			url: m_action,
			data: m_data,
			resetForm: 'true',
			success: function(result){
				var data = $(result).find("#ajax1").html();
				$("#ajax1").html(data);
			}
		});
	});
});


А как сделать обработчик универсальным, один для всех форм? Сложность в том, что результат каждой формы выводится в собственном блоке.

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

avatar
$(document).on(«submit»,«form»,…
  • gtx59
  • 0
avatar
А с этим как быть?
success: function(result){
                                var data = $(result).find("#ajax1").html();
                                $("#ajax1").html(data);
                        }
avatar
$(this).find(".ajax").html(data);
avatar
Я читал про такой вариант, только в этом случае результат будет выводиться не в собственном блоке, а в первом по списку. И еще говорят, что при таком обработчике отправляются сразу все формы со страницы.
Или я не прав и все же стоит этот вариант проверить?
avatar
выводиться будет в том блоке где был submit так как он this, а насчет вырезания результата из страницы можно для идентификации использовать formid идентификатор формы
var data = $(result).find('value='+$(this).find('[name="formid"]').val()).parents('form').html();
$(this).html(data);

что-то вроде этого
Комментарий отредактирован 2017-09-20 10:13:32 пользователем gtx59
avatar
Есть у меня подозрение, что $(this) внутри $.ajax будет указывать не на тот $(this). Его надо переопределять до аякса типа var a = $(this);, а потом уже внутри аякса использовать переменную a :)
avatar
да возможно, я так и делаю обычно) поэтому не сталкивался с конфликтами. Тут главное в нужном направлении подтолкнуть, а там разберутся)
avatar
вообще я считаю что грузить целую страницу для вырезания ответа формы не очень хорошо, я бы сделал отдельным ресурсом аяксоприемник
avatar
Задать еще через data- какой-нибудь параметр для идентификации формы
data-form-id=«form1»
data-form-id=«form2» ну и т.п.

Потом

$(document).on("submit","form",function(e){
var formId = $(this).data("formId");
...

Ну и соответственно

var data = $(result).find("form[data-form-id='" + formId + "']").html();
$("form[data-form-id='" + formId + "']").html(data);


Можно ограничить формы дополнительно каким-то классом ajax_form, чтобы часть форм не была ajax )
avatar

$(function(){
        $(document).on("submit","#form1, #form2",function(e){
                e.preventDefault(e);
                var m_method=$(this).attr('method');
                var m_action=$(this).attr('action');
                var m_data=$(this).serialize();
                $.ajax({
                        type: m_method,
                        url: m_action,
                        data: m_data,
                        resetForm: 'true',
                        success: function(result){
                                $(e.currentTarget).parent().html(result):
                        }
                });
        });
});

Попробуйте так, сам не проверял, но должно работать.
  • EGO
  • +1
avatar
Все огромное спасибо за помощь! Итоговый вариант от Pathologic выглядит так:
<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>	
avatar
Если не затруднит, можете выложить полный код формы с аякс запросом?
avatar
Любая форма. Суть не в коде формы, а в обертке вызова дивом с классом placeholder, также class=«form» и уникальные айдишники у каждой формы. Даже сниппет может быть иным, не FormLister.
avatar
Пробую данный метод. На странице две формы. Всё работает данные отправляет. Но есть проблема после отправки письма нет сообщения об успешной отправке, просто отображается форма и всё, письмо уходит. Если отправляю без аякс то сообщение об отправке письма выводиться и форма пропадает (что и нужно). Может кто сталкивался?
avatar
&successTpl=`@CODE:<p id="здесь-id-вашей-формы">Спасибо! Мы свяжемся с Вами в ближайшее время!</p>`
avatar
Огромное спасибо!
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.