Jquery как сделать показ блока только у текущего элемента по THIS?

Question

[Cheizer]

Есть несколько форм на странице, и есть JS проверка, если форма отправлена и нет ошибок, показать сообщение, мол ок форма отправлена, но блин, это сообщение показывается сразу у всех остальных форм :), как бы это дело привязать только к действующей форме по THIS как то, мало опыта, не могу сообразить, подскажите пожалуйста как это сделать?

<form id="" method="post" class="arctform">
<div class="success" style="display: none;">
 <strong>ЗАЯВКА ОТПРАВЛЕНА!</strong>
<br>Мы свяжемся с Вами в ближайшее время!
 </div>
<input type="text" name="name" value="[[+fi.name]]" placeholder="ИМЯ" class="form-control"/>        
<button type="submit" class="item-form text-center theme-button">Отправить</button>
  </form>

$(function() { 

$(document).on('af_complete', function(event, response) {

if (response.success) { 
//Если форма заполнена и нет ошибок

var su = $(".success").css('display','block').slideDown();
showFu(su);
function showFu(su){
su.slideDown(function () {
     setTimeout(function () {
      su.slideUp()
     }, 6000)
  })
}  
}
});
    
});

Answer 1

[tyzberd]

добавить всем формам одинаковый класс и повесить af_complete на него, тогда в this будет форма.
или второй вариант оставить как есть и плясать от event.target

Comments

[Cheizer]

Спасибо за ответ, сделал так, по классу, но вообще перестало работать на всех формах

$(document).on('af_complete', '.arctform', function (event, response) {
.........
}

[tyzberd]

https://docs.modx.pro/components/ajaxform Событие af_complete

$(document).on('af_complete', function(event, response) {
    var form = response.form;
    // Если у формы определённый id
    if (form.attr('id') == 'my_form_3') {
        // Скрываем её!
        form.hide();
    }
    // Иначе печатаем в консоль весь ответ
    else {
        console.log(response)
    }
});

[Cheizer]

tyzberd, я все перерыл прежде чем сюда написать, это код видел, он не работает, у меня вообще если добавить разные даже id к формам, работает только первая форма, остальные не работают.

[tyzberd]

сделал так, по классу, но вообще перестало работать

если оно нормально всплывает, то должно работать.
https://jsfiddle.net/2eoh31tj/4/
и может вы забыли закрывающюю скобку });

[Cheizer]

tyzberd, ну не работает эта конструкция с af_complete с click работает, а af_complete нет!

$(document).on('af_complete', '.arctform', function(event, response) {}

[Cheizer]

tyzberd, скорее всего не работает если я добавляю в эту конструкцию второй параметр, не важно класс это или id, я не пойму почему

[tyzberd]

вот https://github.com/bezumkin/AjaxForm/blob/master/a...
вроде как ваш скрипт.
trigger он вызывает на document поэтому оставляйте как было.
в response.form должна быть форма, он сам ее использует.
скиньте ссылку

[tyzberd]

что бы работало несколько тут

$(document).off('submit', afConfig['formSelector']).on('submit', afConfig['formSelector'], function (e) {

в afConfig['formSelector'] должен быть класс (не id), или id через запятую
а где вы это указываете я не знаю

[Cheizer]

tyzberd, Ура!!! Благодарю! Разобрался! Спасибо за подсказку про FORM

$(document).on('af_complete', function(event, response) {
 var form = response.form;
if (response.success) { 
   //Если форма заполнена и нет ошибок
 $(".success", form).css('display','block'); 
    }
});