Как задать уникальный id AJAX-формам в Wordpress при выводе через шорткод?

Question

[Евгений Романенко]

Пишу плагин формы обратной связи для Вордпресс. Форма отправляет данные через jQuery Ajax. Шаблон формы вывожу через шорткод. Всё работает как задумал, пока на странице одна форма. Как только вывожу две - всё ломается. Нужно как-то снабдить формы уникальными id, чтобы скрипт нашёл именно эту форму и именно в неё вставил сообщение об отправке.

У меня на этот счёт две мысли.

1. На стороне сервера. При парсинге шорткода каждый раз присваивать ему уникальный id. Есть ли такая возможность в стандартных функциях Wordpress? Если нет, как её можно добавить? Функции add_shortcode, do_shortcode не дают такой возможности.

2. На стороне клиента. Javascript-ом пробежаться по странице и записать каждому новому блоку с формой уникальный id. Но мне этот способ кажется не совсем правильным. Если это не так - поправьте.

Код не нужен, прошу лишь дать направление мысли, алгоритм.

Answer 1

[lamer350]

Если у вас проблема с сборке данных с форм, то скорее всего вы вешаете jquery не на то событие, вешайте на submit формы тогда у вас $(this).serialize(); соберет только данные с формы которую заполняли. Тогда вам вообще от ID никакого толку не будет.

Comments

[Евгений Романенко]

Я думал про this, но после отправки фоном данных на сервер, мне нужно вернуться, скрыть форму и вместо неё отобразить сообщение. Не понимаю, можно ли это сделать без ID?

Приведу код для понимания как сейчас.

// AJAX feedback form (start)
jQuery( document ).ready(function() {
    jQuery("#jfc_ajax_form").submit( // здесь вы предлагаете заменить на this?
		function(){
			sendAjaxForm('jfc_result_form', 'jfc_ajax_form', 'wp-content/plugins/my-plugin/jfc-ajax-jquery.php');
			return false; 
		}
	);
});
 
function sendAjaxForm(result_form, ajax_form, url) {
    jQuery.ajax({
        url:     url,
        type:     "POST",
        dataType: "html",
        data: jQuery("#"+ajax_form).serialize(),
        success: function(response) {
        	
			result = jQuery.parseJSON(response);
			
                        // Можно ли, используя this найти эти блоки, скрыть форму и вывести сообщение?
			let form_wrapper = document.querySelector('.form_wrapper');
			let form_wrapper_height = form_wrapper.getBoundingClientRect().height;
			
			form_wrapper.style.height = form_wrapper_height + 'px'; // Вычисляю высоту обёртки формы, чтобы после её скрытия ничего не дёргалось
			document.getElementById(ajax_form).hidden = true;
			
			document.getElementById(result_form).style.display = 'flex';
        	document.getElementById(result_form).innerHTML = result.message;
    	},
    	error: function(response) {
    		document.getElementById(result_form).innerHTML = "Ошибка. Данные не отправленны.";
    	}
 	});
}
// AJAX feedback form (end)

[lamer350]

Евгений Романенко, вам просто нужно было назначить переменную, щас попробую на коленке пояснить.
Во первых на странице не могут быть элементы с одним и тем же ID (#jfc_ajax_form), вот тут вам просто нужно зацепится за class который идентичен для всех форм.
А далее я бы вообще упросил код:

jQuery( document ).ready(function($) {//сдесь добавляем $ чтобы вернуть привычный синтаксис jquery внутри
    $(".form-class").submit( // здесь меняем id на class для отслеживания всех форм
    function(event){
      event.preventDefault(); //так как есть jquery блокируем стандартную отправку формы так 
      var form = $(this), //вот тут уже используем this
            data = form.serialize(),
            result = form.find('#jfc_result_form'), //но тут тоже правильнее заменить на класс, я так понял этот блок внутри #jfc_ajax_form в данный момент?
            form_wrapper = form.find('.form_wrapper'),
            form_wrapper_height = form_wrapper.height();
    
          $.ajax({
            url:     'wp-content/plugins/my-plugin/jfc-ajax-jquery.php',
            type:     "POST",
            dataType: "html",
            data: data,
            success: function(response) {
              .....
              result.html(result.message);

            }
    }
  );
});

[Евгений Романенко]

lamer350, пытаюсь принцип усвоить, пока не получается. Можете в песочнице показать примитивно, без отправки ajax? Там два блока с формой и блоком сообщений. Заблокировать сабмит у меня, вроде как, получилось, а вот вывести сообщение в окно нужной формы - нет. Сначала пробовал на сайте, теперь упрощённо в песочнице. Не идёт.

https://jsfiddle.net/eujeniogonzalez/hLo4kndx/16/

[lamer350]

Евгений Романенко, https://jsfiddle.net/mL9c28rf/
У вас там 3 проблемы:
1. Вы отслеживали самбит форм с несуществующим классом, так как у вас формы .form
2. Вы либо пишите код на js либо на jquery, в данной связке вместе работать не будет, в вашем случае речь о innerHTML()
3. функция .find() ищет блок внутри формы, у вас div для сообщения лежал вне ее, тогда уже надо было вообще по другому искать блок либо переместить его внутри что я и сделал

[Евгений Романенко]

lamer350, ух, ты! Здорово. Я свою задачу на данный момент решил так, как сумел - на айди, пришлось повозиться с шорткодами, возникли проблемы Почему шорткод выводит контент перед редактором Elementor?, но уже решил. Ваш способ поизящнее будет, мне он больше нравится.

Answer 2

[yarovikov]

https://api.jquery.com/jquery.each/

$('.contact-form').each(function() {
    var form = $(this);
    // ajax
});