Почему в Yii2 событие submit у формы происходит дважды?

Question

[jekahm]

Доброго времени суток!
Для перехвата события сабмита формы использую след. код (в качестве теста):

$(document).on("beforeSubmit", "#pm-form", function (event, messages) {
		var formdata = $(this).serialize();
		console.log(formdata);
		$(this).find(':submit').attr('disabled', true);
		return false;
	});

Но, несмотря на то, что при этом делаю кнопку сабмита неактивной, в консоли можно увидеть, что форма отправляется как минимум дважды при быстром клике на кнопку. То есть по сути вызов события beforeSubmit происходит с задержкой.
С чем это может быть связано? И можно ли это как-то пофиксить?
Заранее благодарен!

Answer 1

[Максим Федоров]

То есть по сути вызов события beforeSubmit происходит с задержкой.
С чем это может быть связано? И можно ли это как-то пофиксить?

beforeSubmit это лишь одно из событий вызываемых в процессе отправки формы в yii2. Пользователь нажимает кнопку сабмита - происходит валидация формы на js, и только после ее успешного прохождения генерируется событие beforeSubmit. Соотвественно валидация так же занимает какое-то время, это и приводит к такому результату. Если Вы хотите блокировать сабмит-кнопку делайте это при возникновении события beforeValidate

Comments

[jekahm]

А Вы бы не могли привести пример кода, чтобы понять как это можно реализовать? Так как по сути кнопка должна заблокироваться в том случае, когда в форме не будут присутствовать ошибки валидации.

[Максим Федоров]

код приводить не имеет смысла, т.к. его надо тестить, но алгоритм может быть такой:
1. На beforeValidate вешаем блокировку кнопки
2. На afterValidate вешаем снятие блокировки, при условии что валидация не прошла и в форме есть ошибки (ведь если пользователь допустил ошибку - нужно дать ему повторную возможность сделать сабмит)
3. На beforeSubmit или на Submit (в зависимости от того что Вам нужно) - так же вешаем разблокировку кнопки.

более подробно про события и методы формы yii2 можно почитать здесь https://yii2-cookbook.readthedocs.io/forms-activef...

[jekahm]

Максим Федоров: Благодарю за помощь!

Answer 2

[jekahm]

Еще один вариант по решению данной проблемы описан здесь https://github.com/yiisoft/yii2/issues/10498

Answer 3

[Abdula Magomedov]

Я использую обычное js событие submit. Все нормально работает.

Совет на заметку: Использовать для отправки формы не сериализированную строку, а объект FormData.
Тут подробнее: https://learn.javascript.ru/xhr-forms

Comments

[jekahm]

Пробовал и с обычным submit. Проблема все равно возникает.