Как предотвратить повторную отправку формы при отправке ajax?

Question

[FVest]

Всем привет. Подскажите как предотвратить повторную отправку данных при успешном событии? После отправки данных идет задержка 3 секунды, пользователь может отправить форму много раз.
Данный код блокирует отправку формы много раз, в случае ошибки форма так же блокируется.

$('form').submit(function(){
		$(this).find('input[type=submit], button[type=submit]').prop('disabled', true);
	});

Может быть добавить событие снятие блокировки спустя 3 секунды?

$('form').submit(function(){
		$(this).find('input[type=submit], button[type=submit]').prop('disabled', true);
		setTimeout(function(){
        $('input[type=submit], button[type=submit]').prop('disabled', false);
        }, 3000);
	});

Сама отправка формы идет по идентификатору

$('#appExchange').submit(function(){
        var url = '/ajax.php?action=app&type=exchange';
		var balance_user = $('#balance_user').html();
		var balance_adver = $('#balance_adver').html();
		var data = $(this).serialize()+'&balance_user='+balance_user+'+&balance_adver='+balance_adver+'&ajax=1';
        $.post(url, data, function(result){
			Toast.fire({icon: result['status'],text: result['text']});
			if(result['status'] == 'success'){
                        // ЗДЕСЬ КАКОЕ-ТО ДЕЙСТВИЕ ДЛЯ ЗАПРЕТА ПОВТОРНОЙ ОТПРАВКИ
			$('#balance_user').html(result['balance_user'].toFixed(5));
			$('#balance_adver').html(result['balance_adver'].toFixed(5));
			}
        }, 'json');
        return false;
    });

Как добавить блокировку повторной формы только при успешной отправке или как правильно вызвать функцию?

Answer 1

[FVest]

Пошарился немного в инете и нашел решение, оставлю на своем примере, может быть кому-то пригодится. При успешном событии кнопка блокируется, повторный запрос не отправляется. При ошибке убираем атрибут disable, чтобы человек мог отредактировать строки и отправить заново.

$('#appExchange').submit(function(e){
		e.preventDefault();
        $("#appExchange [type=submit]").prop('disabled', true);
        var url = '/ajax.php?action=app&type=exchange';
		var balance_user = $('#balance_user').html();
		var balance_adver = $('#balance_adver').html();
		var data = $(this).serialize()+'&balance_user='+balance_user+'+&balance_adver='+balance_adver+'&ajax=1';
        $.post(url, data, function(result){
			Toast.fire({icon: result['status'],text: result['text']});
			if(result['status'] == 'error'){
			$("#appExchange [type=submit]").prop('disabled', false);
			}
			if(result['status'] == 'success'){
			$('#balance_user').html(result['balance_user'].toFixed(5));
			$('#balance_adver').html(result['balance_adver'].toFixed(5));
			}
        }, 'json');
        return false;
    });

Comments

[AUser0]

Блокировать надо на стороне сервера. Не в клиентском коде, а на стороне сервера. Используйте одноразовые токены. Вуаля!

[ThunderCat]

AUser0, во первых, из кода не видно используются ли токены, вполне возможно что они есть. Во вторых, задача была не допустить отправки аяксом мильён запросов со странички, то есть именно спама формы. Токен никак не решает эту задачу, у вас просто будут приходить ответы с ошибкой.

[AUser0]

ThunderCat :

Во вторых, задача была не допустить отправки аяксом мильён запросов со странички, то есть именно спама формы.

Эммм, точно-точно?!

FVest :

Подскажите как предотвратить повторную отправку данных при успешном событии?

[ThunderCat]

AUser0,

После отправки данных идет задержка 3 секунды, пользователь может отправить форму много раз.

то что человек не очень дружит с построением логичных предложений не повод читать только первое предложение из вопроса.

Answer 2

[Александр]

CSRF

Comments

[Алексей Уколов]

И как это должно помочь?