Блог

Главная - Вопросы по программированию - Отключите кнопку отправить при повторном посещении страницы формы

Отключите кнопку отправить при повторном посещении страницы формы

#javascript #html #css #forms #button

Вопрос:

Есть ли способ, которым страница формы может обнаружить, что после того, как вы ответите на форму и отправите ее, а затем ВЕРНЕТЕСЬ на страницу формы, кнопка отправить теперь ОТКЛЮЧЕНА?

Важное примечание: Если другой пользователь, на форму можно ответить и отправить, если тот же пользователь снова переходит по ссылке, кнопка отправить ОТКЛЮЧЕНА.

Возможно ли это с помощью HTML, CSS и JavaScript?

 <form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="First Name"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Last Name"><br><br>
  <input type="submit" value="Submit">
</form>

Ответ №1:

Если вы пытаетесь реализовать эту функциональность строго на стороне клиента, вы можете сохранить, отправил ли пользователь форму localStorage .

Например, вы можете добавить прослушиватель submit событий в форму, в которой для отправленного состояния установлено значение true localStorage . При загрузке страницы извлеките это состояние, проверьте, верно ли оно, и если да, то всякий раз, когда пользователь отправляет форму, предотвращайте отправку формы.

Например:

 const form = document.querySelector('form')
var isDisabled = !!localStorage.getItem('submitted');

form.addEventListener('submit', function(e){
    if(isDisabled){
    e.preventDefault();
    alert("You have already submitted")
  }
    localStorage.setItem('submitted', true);
})

Демонстрационная версия JsFiddle: https://jsfiddle.net/Spectric/dowc1qea/

Однако имейте в виду, что, поскольку localStorage клиент может изменять состояние, они всегда могут программно установить значение false и отправить форму снова.

Метки: