Как отключить отправку формы, пока она ожидает ответа сервера в javascript?

#javascript #jsp

#javascript #jsp

Вопрос:

У меня есть форма

 <form method="POST" id="form1" action"<%=login%>">
<input id="btn" type="submit" value="Log in" />
 

где %=login% — это страница jsp, которая вызывает java-код.

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

Спасибо

Комментарии:

1. что мешает вам скрыть или отключить кнопку?

2. Какой хороший способ отключить кнопку, пока я не получу ответ от сервера? Я попытался добавить функцию onclick к кнопке, где она отключает ее, а затем отправляет, но кнопка отключена, поэтому она не отправляется.

Ответ №1:

Я бы вызвал страницу JSP с запросом AJAX. Чтобы предотвратить перезагрузку страницы, добавьте EventListener в свою форму:

 document.getElementById("form1").AddEventListener("submit", e => {
    e.preventDefault();
    document.getElementById("btn").disabled = true;
    // AJAX Request
});
 

Если запрос завершается успешно или завершается неудачно, установите для атрибута disabled-кнопки значение false.

Ответ №2:

Вы можете предотвратить действие, если обнаружите его более одного раза

 document.querySelector("#form1").addEventListener("submit", function(e) {
  if (this.dataset.active) {
    e.preventDefault;
    return;
  }
  this.dataset.active = 'true';
});