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

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

<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);
			}
		});
	});
});


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

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

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.
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.