Как запретить множества кликов в кнопке?

Question

[djienbaev97]

Добрый день! Проект у меня на yii2 интернет магазин. У меня есть форма которая пользователь заполняет данные и отправляет, и если нажать кнопку быстро несколько раз, то в базу попадаются несколько одинаковых данных(копии). Моя кнопка через onclick отправляет в контроллер и там же сохраняю.

Как сделать чтобы кнопка не нажималась несколько раз? Или как решаете такие проблемы? Я раньше не сталкивался, помогите

Answer 1

[Надим]

Очевидно, что сразу после нажатия кнопки вам нужно заблокировать или его или обработчик и ждать пока не придет ответ от сервера, только после этого разблокируете все обратно.

Answer 2

[Антон Р.]

Например скрывать кнопку после нажатия через изменение CSS после клика. А вообще после отправки формы хорошо бы делать редирект куда то или убирать форму вообще и показывать сообщение что все хорошо отправилось.

Comments

[djienbaev97]

Антон Р. у меня и так делается редирект в страницу оплаты, но можно успеть нажать несколько раз пока делается переход в другую страницу

[Антон Р.]

djienbaev97, через js скрывай кнопку.

[Alex]

Антон Р., Скрывать -- не лучшая идея

Answer 3

[vawylon]

Я бы отчищал поля ввода либо блокировал кнопку. Что то вроде ожидания. Либо блокировал всё окно типо "Отправка" и анимация загрузки

Answer 4

[Дмитрий]

Я бы сделал флаг и по нему проверку, при нажатии перевод флага в false например. Если флаг false то отменяем обработку события. А там уже с этим флагом работать, перевод в true к примеру, если успешный ответ от сервера

Answer 5

[Александр]

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

На jquery это примерно так:

$('form').submit(function(){
	var button = $(this).find('button')

	button.prop('disabled', true)

	$.ajax({
		url: 'script.php',
		success: function(response){
			button.prop('disabled', false)
		}
	}
})