John Vasiliou John Vasiliou - 19 days ago 5
HTML Question

Show/hide tables or divs for a HTML form

This was an answer I got recently but the topic has died down and I have a few more questions to ask about it:

"That's quite a common request. Here is one way


  • Break your form in pages using
    div
    s with easy to manage
    id
    s and only the first one visible



.

<form action=".." ..>
<!-- the first page has style set to be visible -->
<div id="formpage_1" style="visibility: visible; display: block; ..">
<label for="..">..</label>
<input type=".." ..>
..
<!-- NEXT button -->
<input type="button" value="next" onclick="pagechange(1,2);">
</div>
<!-- the 2nd and following pages have style set to be invisible -->
<div id="formpage_2" style="visibility: hidden; display: none; ..">
<label for="..">..</label>
<input type=".." ..>
..
<!-- PREVIOUS and NEXT buttons -->
<input type="button" value="back" onclick="pagechange(2,1);">
<input type="button" value="next" onclick="pagechange(2,3);">
</div>
...
<div id="formpage_10" style="visibility: hidden; display: none; ..">
<label for="..">..</label>
<input type=".." ..>
..
<!-- PREVIOUS and SUBMIT buttons -->
<input type="button" value="back" onclick="pagechange(10,9);">
<input type="submit" value="Submit">
</div>



  • Use a simple JS function to switch between the pages



.

function pagechange(frompage, topage) {
var page=document.getElementById('formpage_'+frompage);
if (!page) return false;
page.style.visibility='hidden';
page.style.display='none';

page=document.getElementById('formpage_'+topage);
if (!page) return false;
page.style.display='block';
page.style.visibility='visible';

return true;
}


Edit

If you want to use a table layout, break the for into more tables (one for each page) and give the
id
s to the tables instead of the
div
s"

Now the above works, when using divs, but when I use tables it doesn't work properly. The back, next buttons show all the time whether hidden or not and they always appear at the top. Any way to prevent this as I don't want to re-style everything now that I am using divs as opposed to tables.

Also when i click next and I'm at the bottom of a form it will take me to the middle/bottom of the next. Is there a way to link it to the top each time someone clicks back/next?

Thanks in advance.

Answer

perhaps it helps you?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script>


    function pagechange(currentPage) {
     var divs=document.getElementsByTagName("div");
     for(var i=0;i<divs.length;i++){
       if(divs[i].id!=('formpage_'+(parseInt(currentPage)+1))){
          divs[i].style.display="none";
          divs[i].style.visibility='hidden';
       }else{
         divs[i].style.display="block";
         divs[i].style.visibility='visible';
       }
     }
   }

  </script>
 </head>

 <body>
  <form action=".." ..>
<!-- the first page has style set to be visible -->
<div id="formpage_1" style="visibility: visible; display: block; .."> 
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- NEXT button -->
  <input type="button" value="next" onclick="pagechange(1);">
</div>

<!-- the 2nd and following pages have style set to be invisible -->
<div id="formpage_2"  style="visibility: hidden; display: none; ..">
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- PREVIOUS and NEXT buttons -->
  <input type="button" value="back" onclick="pagechange(0);">
  <input type="button" value="next" onclick="pagechange(2);">
</div>
...
<div id="formpage_3"  style="visibility: hidden; display: none; ..">
  <label for="..">..</label>
  <input type=".." ..>
  ..
  <!-- PREVIOUS and SUBMIT buttons -->
  <input type="button" value="back" onclick="pagechange(1);">
  <input type="submit" value="Submit">
</div>

 </body>
</html>