Повторная отправка формы во время работы обработчика от предыдущей отправки

Question

Возникают дублирующиеся сообщения от пользователей. Предположительная причина - обработчик формы отрабатывает долго и за это время пользователь еще несколько раз дергает кнопку отправить. Мне самому не удалось воспроизвести этот кейс - нажимаю на кнопку повторной отправки нет , но возможно есть браузеры в которых это проходит. Понятно, что нужно лечить "причину болезни", а не симптомы - разбираться с теми событиями, что навешаны на калбэк формы и вызывают торможение , но сейчас нужно поставить временную заплатку. Пытаюсь сделать кнопку неактивной по событиям клика на буттон или сабмита формы. Но атрибут disabled в разметку не добавляется. Вероятно потому что после сабмита формы идет перезагрузка страницы и разметка в это время не подлежит изменению яваскриптом? (или нет?) Можно ли поменять что либо в разметке на клиенте во время перезагрузки страницы? И может ли клиент дернуть кнопку повторно во время перезагрузки и на каких браузерах это возможно? код кнопки:

<input type="submit" accesskey="s" tabindex="6" name="post" value="Отправить" class="button1 default-submit-action">

Заголовок формы:

<form id="postform" method="post" action="./posting.php?mode=post&amp;f=33" enctype="multipart/form-data">

что я пробовал и не работает:

$('input[name="post"]').on('click', function() {                        
                        $('input[name="post"]').prop('disabled', true);
                    });

еще:

$(this).find('input[type="submit"]').attr('disabled','disabled');

$('input[type=submit]').one('submit', function() {
     $(this).attr('disabled','disabled');
 });

Answer 1

Конечно при обновлении станицы всё загружается заново. Чтобы воспроизвести этот кейс (когда пользователь присылает по несколько сообщений) - после отправки сообщения обновите страницу, подтвердите повторную отправку и вы увидите еще одно сообщение. Зачем-то (возможно ждут ответ на сообщение), ваши пользователи иногда обновляют страницу и вы получаете по несколько одинаковых сообщений.

Как с этим бороться? Ну, отправляйте форму через JS не обновляя страницу. Плюс минус так

<form id="postform">
 ... поля формы
 <button type="submit" id="submitForm">Отправить форму</button>
</form>

<script>
document.getElementById("postform").addEventListener('submit', funcSubmit);
const buttonSubmitForm = document.getElementById("submitForm");

const funcSubmit = async () => {
  buttonSubmitForm.prop('disabled', true);

  const response = await fetch('url', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json;charset=utf-8'
    },
    body: JSON.stringify({
      // Поля формы
    })
  });

  buttonSubmitForm.prop('disabled', false);

  // Тут обрабатываете полученные данные из формы
  // добавляете сообщение в DOM-дерево, обрабатываете ошибки и прочее
}

</script>

Понятно, что нужен отдельный url который будет принимать поля формы и в ответе выдавать JSON с результатом этой работы.

БЛОГ НА HUSL

Повторная отправка формы во время работы обработчика от предыдущей отправки

Ответы (1 шт):