Показать скрытый элемент снова в HTML при нажатии кнопки возврата - PullRequest
1 голос
/ 19 июня 2020

У меня есть этот простой HTML код, который показывает скрытый элемент в случае, если пользователь выбирает «Да». Проблема, с которой я столкнулся с этим кодом, заключается в следующем: после того, как пользователь отправит запрос и нажмет кнопку «Назад» в браузере, он по-прежнему показывает «Да», но не показывает скрытый элемент. Пользователь должен нажать «Нет», а затем повторно выбрать «Да», чтобы данные отобразились снова. Как это решить? Я добавил это изображение для справки

<!DOCTYPE html>
    <html>
       <head>
          <title>Some Title</title>
          <script type='text/javascript'>
             function onload() {
                document.getElementById('YesOrNo').onchange = function (e) {
                if (this.value == 'Yes') {
                  document.getElementById('Details').style.display='';
                } else {
                  document.getElementById('Details').style.display='none';
               }
              };
             }
          </script>
       </head>
       <body onload='onload()'>
          <h2 >Welcome to ABC</h2>
          <form action=. method='POST' enctype='multipart/form-data'>
                   YesOrNo?
                   <select id='YesOrNo' name = 'Insert' style='width: 80px;height: 25px' required>
                      <option value='No'>No</option>
                      <option value='Yes'>Yes</option>
                   </select>
             <div id='Details' style='display:none;'>
                 <br><b>Some Hidden Data</b><br>
             </div>
            <br><br><input type='submit' name='my-form' value='Submit' style='width: 100px;height: 40px;font-weight: 700'><br>
          </form>
          <hr>
          See you soon
       </body>
    </html>

Ответы [ 2 ]

3 голосов
/ 19 июня 2020

Судя по вашему коду <form action=. method='POST' enctype='multipart/form-data'>, я думаю, что когда вы отправляете форму, вы переходите на новую страницу (я не знаю, что это за страница, но когда я попробовал, это был мой индекс каталога). Когда вы нажимаете кнопку «Назад», веб-страница снова перезагружается, то есть ее состояние не сохраняется. Итак, я думаю, что нет способа справиться с этим, если вы не можете сохранить в браузере некоторые биты информации о предыдущем состоянии.

Если вы так сильно заинтересованы в этом, я могу предложить решение. Но не уверен, что это стандартный способ обработки этого сценария . Мой подход состоит в том, чтобы использовать localStorage и сохранять значение состояния.

function onload() {
    data = localStorage.getItem("details")
    if(data === "yes"){
        document.getElementById('Details').style.display='';
        document.getElementById('YesOrNo').value="Yes"
    }
    document.getElementById('YesOrNo').onchange = function (e) {
    if (this.value == 'Yes') {
      document.getElementById('Details').style.display='';
      localStorage.setItem("details","yes")
    } else {
      document.getElementById('Details').style.display='none';
      localStorage.setItem("details","no")
   }
  };
 }

Что мы здесь делаем, так это то, что всякий раз, когда пользователь выбирает «Да», мы сохраняем его в localStorage. То же самое и с Нет. Когда вызывается функция onload (), мы проверяем значение localStorage. Если «Да», покажите, что вы хотите.

0 голосов
/ 19 июня 2020

Я просмотрел ваш код, но думаю, что это проблема. Вы создали функцию на основе события onchange, и это здорово. Но если страница возвращается, это событие не вызывается, что означает, что функция не вызывается. Поэтому свойство display не установлено, а это означает, что содержимое остается скрытым.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...