CODEWITHSUNDEEP
javascripthtml
Harsh Bhimrajka
Harsh Bhimrajka

Reputation: 15

Show hidden element again in HTML when the back button is pressed

I have this simple HTML code which shows the hidden element in case the user selects 'Yes'. The issue I'm facing with this code is: After the user submits and presses the back button on the browser, it still shows 'Yes' but doesn't show the hidden element. User has to click on 'No' and then reselect 'Yes' for the data to show again. How to solve this? I've added this picture for your reference

<!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>

Upvotes: 1

Views: 762

Answers (2)

bonyem
bonyem

Reputation: 1208

From your code <form action=. method='POST' enctype='multipart/form-data'>, I think that when ever you submit the form, you move to a new page (I do not know what page it is, but when I tried, it was my directory index). When you hit back button, the web page is getting reloaded again, that is, its state is not preserved. So, I think there is no way to handle this unless you can store some bits of information in the browser about the previous state.

If you are so much interested in doing this, I can give a solution. But not sure if this is a standard way to handle this scenario. My approach is to use localStorage and store the state value.

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")
   }
  };
 }

What we do here is that whenever user selects "Yes" we store it in localStorage. Similarly for No also. When the onload() function is called, we check the localStorage value. If it is "Yes", show what you want.

Upvotes: 3

Carsten Flokstra
Carsten Flokstra

Reputation: 65

I have taken a look at your code, but I think that there is a problem. You've created a function based on a onchange event which is great. But if the page goes back, that event is not called which means that the function is not called. Therefore the display property is not set and that means that the content stays hidden.

Upvotes: 0

Related Questions