title: Show/hide tables or divs for a HTML form
body: <p>This was an answer I got recently but the topic has died down and I have a few more questions to ask about it:</p>
  
  <p>"That's quite a common request. Here is one way </p>
  
  <ul>
  <li>Break your form in pages using <code>div</code>s with easy to manage <code>id</code>s and only the first one visible</li>
  </ul>
  
  <p>.</p>
  
  <pre><code>&lt;form action=".." ..&gt;
  &lt;!-- the first page has style set to be visible --&gt;
  &lt;div id="formpage_1" style="visibility: visible; display: block; .."&gt; 
    &lt;label for=".."&gt;..&lt;/label&gt;
    &lt;input type=".." ..&gt;
    ..
    &lt;!-- NEXT button --&gt;
    &lt;input type="button" value="next" onclick="pagechange(1,2);"&gt;
  &lt;/div&gt;
  &lt;!-- the 2nd and following pages have style set to be invisible --&gt;
  &lt;div id="formpage_2"  style="visibility: hidden; display: none; .."&gt;
    &lt;label for=".."&gt;..&lt;/label&gt;
    &lt;input type=".." ..&gt;
    ..
    &lt;!-- PREVIOUS and NEXT buttons --&gt;
    &lt;input type="button" value="back" onclick="pagechange(2,1);"&gt;
    &lt;input type="button" value="next" onclick="pagechange(2,3);"&gt;
  &lt;/div&gt;
  ...
  &lt;div id="formpage_10"  style="visibility: hidden; display: none; .."&gt;
    &lt;label for=".."&gt;..&lt;/label&gt;
    &lt;input type=".." ..&gt;
    ..
    &lt;!-- PREVIOUS and SUBMIT buttons --&gt;
    &lt;input type="button" value="back" onclick="pagechange(10,9);"&gt;
    &lt;input type="submit" value="Submit"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <ul>
  <li>Use a simple JS function to switch between the pages</li>
  </ul>
  
  <p>.</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>If you want to use a table layout, break the for into more tables (one for each page) and give the <code>id</code>s to the tables instead of the <code>div</code>s"</p>
  
  <p>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.</p>
  
  <p>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?</p>