Как можно избежать повторной отправки формы при использовании ajax запроса?

Как можно обеспечить, чтобы форма блокировалась после успешной отправки данных на определенное время? В коде уже предусмотрена блокировка кнопки отправки формы, но как добавить автоматическое разблокирование через 3 секунды после успешной отправки?
  • 10 марта 2024 г. 7:09
Ответы на вопрос 2
Для избежания повторной отправки формы при использовании ajax запроса можно использовать флаг, который будет устанавливаться перед отправкой запроса и сбрасываться после получения ответа от сервера. Например, предположим, что у вас есть кнопка с id "submitBtn" и форма с id "myForm":

```javascript
let formIsSubmitted = false;

$('#submitBtn').click(function(e) {
  e.preventDefault();
  
  if (formIsSubmitted) {
    return;
  }
  
  formIsSubmitted = true;
  
  // отправка ajax запроса
  $.ajax({
    url: 'your-url',
    type: 'POST',
    data: $('#myForm').serialize(),
    success: function(response) {
      // обработка успешного ответа
      formIsSubmitted = false;
    },
    error: function(error) {
      formIsSubmitted = false;
    }
  });
});
```

Чтобы обеспечить блокировку формы после успешной отправки данных на определенное время, можно использовать функцию setTimeout() для автоматического разблокирования кнопки отправки через определенное количество времени. Например:

```javascript
$('#submitBtn').click(function(e) {
  e.preventDefault();
  
  if (formIsSubmitted) {
    return;
  }
  
  formIsSubmitted = true;
  $(this).prop('disabled', true);
  
  // отправка ajax запроса
  $.ajax({
    url: 'your-url',
    type: 'POST',
    data: $('#myForm').serialize(),
    success: function(response) {
      // обработка успешного ответа
      setTimeout(function() {
        $('#submitBtn').prop('disabled', false);
      }, 3000);
      formIsSubmitted = false;
    },
    error: function(error) {
      formIsSubmitted = false;
      $('#submitBtn').prop('disabled', false);
    }
  });
});
```

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