javascript - Showhide tables or divs for a HTML form - Stack Overflow

admin管理员组

文章数量:1334945

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 mon request. Here is one way

• Break your form in pages using divs with easy to manage ids 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 ids to the tables instead of the divs"

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?

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 mon request. Here is one way

• Break your form in pages using divs with easy to manage ids 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 ids to the tables instead of the divs"

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?

• javascript
• html
• forms
• tabular

Share Improve this question Follow edited Mar 17, 2018 at 20:26 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Mar 5, 2012 at 13:43 John VasiliouJohn Vasiliou 99777 gold badges2727 silver badges4848 bronze badges 3

• 1 I strongly suggest you remove all visibility usage and only use display or vice versa. Visibility is only used if you want the hidden items to take up space in the page – mplungjan Commented Mar 5, 2012 at 13:58
• yep, seems to work without so ive just removed it thanks. Hopefully this doesn't affect anything as it all seems fine :) – John Vasiliou Commented Mar 5, 2012 at 14:26
• So how do you show and hide the table parts? I suggest you add IDs to the ROWS and hide/show those if you MUST use tables (not remended) – mplungjan Commented Mar 5, 2012 at 18:30

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

perhaps it helps you?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3/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>

this works quite nicely for tables (place this in headsection)

<script>
function toggleTable() {
    var myTable = document.getElementById("yourTable");
    myTable.style.display = (myTable.style.display == "table") ? "none" : "table";
}
</script>

then place a button to toggle table display on and off

<a id="toggleTableDisplay" onclick="toggleTable();" href="#">Show/Hide Table</a>

and the table definition

<table id="yourTable">...</table>

本文标签： javascriptShowhide tables or divs for a HTML formStack Overflow