Как в Contact Form 7 скрывать кнопку пока он думает?

Question

[Роман Говоров]

Сделал интеграцию с bitrix 24, теперь тупит перед отправкой секунды 3..
Как сделать чтобы кнопка исчезала, а то из за кликов пользователя прилетает по 3 - 5 заявок..

Answer 1

[Роман Говоров]

Решение моей проблемы:

$(document).ready(function( $ ) {
        function timer(element_class){
            let timer;
            let x = 4;
            let defVal = $(element_class).val();

            function countdown(){
                $(element_class).val('Повторная отправка формы через: ' + x + 'сек.');
                x--;
                if (x<0){
                    clearTimeout(timer);
                    $(element_class).val(defVal);
                }
                else {
                    timer = setTimeout(countdown, 1000);
                }
            }
            countdown();
        }
        document.addEventListener( 'wpcf7submit', function( event ) {

            let element_class = '#' + event.detail.id + ' .wpcf7-submit';
            timer(element_class);
            $(element_class).attr('disabled', 'disabled');

            setTimeout(function(){
                $(element_class).removeAttr('disabled');
            }, 4000);

        }, false );

        document.addEventListener( 'wpcf7mailsent', function( event ) {
            let element_class = '#' + event.detail.id + ' .wpcf7-submit';
            $(element_class).remove();
        }, false );
    });

Answer 2

[Денис Янчевский]

Возможно, событие wpcf7submit подойдет.

Comments

[Роман Говоров]

Я через него и пытаюсь делать но не могу привязаться к ajax-loader. . .

[Денис Янчевский]

Роман Вопроскин, А зачем привязываться? На wpcf7submit скрываете кнопку, на wpcf7mailsent и остальных показываете снова.

Answer 3

[Глеб Варганов]

можно сделать вариант на jquery, после клика мы ставим атрибут disabled, а через 5 секунд убираем этот атрибут:
добавил еще, чтобы текст менялся и было понятнее...

// Когда нажали на кнопку #button_id
$(document).on('click', '#button_id', function(){

	var element_id = $(this);
  
	// Установим атрибут на кнопку disabled
	$(element_id).attr('disabled', 'disabled');
  $(element_id).html('Loading...');

	// Через 5 секунд уберем этот атрибут
	setTimeout(function(){
		$(element_id).removeAttr('disabled');
    $(element_id).html('Submit');
	}, 5000); // Время в милисекундах

});

Выложил пример на jsfiddle:

Comments

[Роман Говоров]

У меня вся форма из строя выходит при использовании данного метода. Видимо плагин цепляется за disabled и тупит. Не подходит вариант...

[Глеб Варганов]

Роман Вопроскин, в консоль что-то выводит?

[Роман Говоров]

Глеб Варганов, реализовал с твоей помощью. Спасибо за наводку. Решение выше!

[Глеб Варганов]

Роман Вопроскин, окей)