StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POShow/hide tables or divs for a HTML form
primarykey
Id
9567658
data
AcceptedAnswerId
11202547
AnswerCount
2
ClosedDate
CommentCount
3
CommunityOwnedDate
CreationDate
2012-03-05T13:43:48.017
FavoriteCount
0
LastActivityDate
2018-03-17T20:26:25.890
LastEditDate
2018-03-17T20:26:25.890
LastEditorUserId
4370109
OwnerUserId
1065389
ParentId
0
PostTypeId
1
Score
1
ViewCount
10917
LastEditorDisplayName
text
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><form action=".." ..>  <div id="formpage_1" style="visibility: visible; display: block; .."> <label for="..">..</label> <input type=".." ..> ..  <input type="button" value="next" onclick="pagechange(1,2);"> </div>  <div id="formpage_2" style="visibility: hidden; display: none; .."> <label for="..">..</label> <input type=".." ..> ..  <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=".." ..> ..  <input type="button" value="back" onclick="pagechange(10,9);"> <input type="submit" value="Submit"> </div> </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>
Tags
<javascript><html><forms><tabular>
Title
Show/hide tables or divs for a HTML form
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USJohn Vasiliou
plurals
PostLinksPostIdRelatedPostId
1. This table or related slice is empty.
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.