Как предотвратить повторную отправку формы при отправке ajax?
Всем привет. Подскажите как предотвратить повторную отправку данных при успешном событии? После отправки данных идет задержка 3 секунды, пользователь может отправить форму много раз.
Данный код блокирует отправку формы много раз, в случае ошибки форма так же блокируется.
$('form').submit(function(){ $(this).find('input[type=submit], button[type=submit]').prop('disabled', true); }); |
$('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); }); |
$('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; }); |
$('#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; });
Как добавить блокировку повторной формы только при успешной отправке или как правильно вызвать функцию?
Дополнительно:
Пошарился немного в инете и нашел решение, оставлю на своем примере, может быть кому-то пригодится. При успешном событии кнопка блокируется, повторный запрос не отправляется. При ошибке убираем атрибут 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; }); |
$('#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; });
- Блокировать надо на стороне сервера. Не в клиентском коде, а на стороне сервера. Используйте одноразовые токены. Вуаля!
- AUser0, во первых, из кода не видно используются ли токены, вполне возможно что они есть. Во вторых, задача была не допустить отправки аяксом мильён запросов со странички, то есть именно спама формы. Токен никак не решает эту задачу, у вас просто будут приходить ответы с ошибкой.
- ThunderCat :
Во вторых, задача была не допустить отправки аяксом мильён запросов со странички, то есть именно спама формы.
Эммм, точно-точно?!
FVest :
Подскажите как предотвратить повторную отправку данных при успешном событии?
- AUser0,
После отправки данных идет задержка 3 секунды, пользователь может отправить форму много раз.
то что человек не очень дружит с построением логичных предложений не повод читать только первое предложение из вопроса.
Ответы:
CSRF
- И как это должно помочь?
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для предотвращения повторной отправки формы при использовании AJAX запроса, можно применить следующие подходы:
1. Отключение кнопки отправки формы после ее нажатия:
```php
$(document).ready(function(){
$('form').submit(function(){
$('button[type="submit"]').prop('disabled', true);
return false;
});
});
```
2. Добавление проверки на отправку формы только один раз:
```php
var formSubmitted = false;
$(document).ready(function(){
$('form').submit(function(){
if(formSubmitted) {
return false;
}
formSubmitted = true;
// Ваш код AJAX запроса
return false;
});
});
```
3. Использование атрибута data для отслеживания отправки формы:
```php
$(document).ready(function(){
$('form').submit(function(){
if($(this).data('submitted') === true) {
return false;
}
$(this).data('submitted', true);
// Ваш код AJAX запроса
return false;
});
});
```
4. Использование одноразового токена (nonce) для каждой отправки формы:
```php
$(document).ready(function(){
$('form').submit(function(){
var formData = $(this).serialize();
formData += '&nonce=' + Math.random().toString(36).substr(2, 10);
$.ajax({
type: 'POST',
url: 'обработчик.php',
data: formData,
success: function(response){
// Обработка успешного ответа
}
});
return false;
});
});
```
Выбор конкретного способа зависит от требований вашего проекта и уровня защиты, который вам необходим. Надеюсь, что мой ответ поможет вам предотвратить повторную отправку формы при использовании AJAX запросов.