Pabs Posted February 15, 2006 Share Posted February 15, 2006 hi therenew to this forum... hope someone can help me on this little problem I 'm having :)I have some code that will generate a page with multiple tabs. (it uses CSS)what I want to do is have each tab be a section of a form. imagine a huge form with 150 fields for instance. take that form and put 50 fields in each of the three tabs.now, what I would like is for the user to be able to go on tab one, fill out his/her info, then go to tab 2 and continue and then three... once done they would hit the submit button and all info from all three tabs would be sent out to be processed (added to DB in my case)what is the easiest way to accomplish this?? also, once the user is on tab two..can he come back to tab 1 and still see all the info they put in? or would it disappear.? once it would reload that page, wouldn’t all info be lost ? or is there a way to do this?if you need more info to understand let me know and I’ll try and explain myself better thanksPabs Link to comment Share on other sites More sharing options...
aspnetguy Posted February 15, 2006 Share Posted February 15, 2006 What I do in a case like this is divide the fields into the 3 groups of 50.place each group into its own <div>Then when a tab is clicked hide all <div> except the one that should show with the current tab, etc.In reality all 150 fields are in the form, but 100 are hidden and 50 showing at any given time.Then when you submit everything gets sent.Did I explain that good? Link to comment Share on other sites More sharing options...
Pabs Posted February 15, 2006 Author Share Posted February 15, 2006 pardon my ignorance...but how would I hide a <div>? Link to comment Share on other sites More sharing options...
aspnetguy Posted February 15, 2006 Share Posted February 15, 2006 if you had this HTML <div id="div1">some content blah blah blah</div> Then this javascript could manipulate it. var theDiv = document.getElementById('div1'); //div1 objecttheDiv.style.display = 'none'; //hide the divtheDiv.style.display = 'block'; //show div again Are you familar working with JavaScript??? It is not a difficult task to do but you do need a good understanding of JavaScript to do it. Link to comment Share on other sites More sharing options...
Pabs Posted February 15, 2006 Author Share Posted February 15, 2006 Javascript...it's been a while... :)more into php lately...can the same taks be done using php? Link to comment Share on other sites More sharing options...
Pabs Posted February 15, 2006 Author Share Posted February 15, 2006 if you sent me an entire file that uses this logic I would easily figure it out I'm sure... Link to comment Share on other sites More sharing options...
aspnetguy Posted February 15, 2006 Share Posted February 15, 2006 Javascript...it's been a while... :)more into php lately...can the same taks be done using php?<{POST_SNAPBACK}> it is better to use JavaScript, IMO, that way you don't have to PostBack when switching tabs...plus PostBacks make it harder to keep the data in the fields.I don't have time now but I'll see what I can do later. Link to comment Share on other sites More sharing options...
Pabs Posted February 15, 2006 Author Share Posted February 15, 2006 thanks a lot... I'll wait for your reply... Pabs Link to comment Share on other sites More sharing options...
aspnetguy Posted February 15, 2006 Share Posted February 15, 2006 try this. let me know if you need something explained. <html><head> <title>test</title><style type="text/css"> html,body { font-family:verdana; } .tab { float:left; padding:5px; background:#eeeeee; border:1px solid #b8b8b8; margin-right:3px; font-size:11px; cursor:pointer; }</style><script type="text/javascript"> function toggleTabs(tab) { var focusTabPane = document.getElementById(tab.id + 'pane'); var tabPanes = new Array(); tabPanes[0] = document.getElementById('tab0pane'); tabPanes[1] = document.getElementById('tab1pane'); tabPanes[2] = document.getElementById('tab2pane'); var i; //hide all tabs for(i=0;i<tabPanes.length;i++) { tabPanes[i].style.display = 'none'; } //show clicked tab focusTabPane.style.display = 'block'; }</script></head><body> <form action="form action page" method="post"> <div class="tab" id="tab0" onclick="toggleTabs(this)"> Tab 1 </div> <div class="tab" id="tab1" onclick="toggleTabs(this)"> Tab 2 </div> <div class="tab" id="tab2" onclick="toggleTabs(this)"> Tab 3 </div> <br style="clear:left"/> <br/> <div id="tab0pane" style="display:block"> Form elements group 1 go here </div> <div id="tab1pane" style="display:none"> Form elements group 2 go here </div> <div id="tab2pane" style="display:none"> Form elements group 3 go here </div> </form></body></html> Link to comment Share on other sites More sharing options...
Pabs Posted February 15, 2006 Author Share Posted February 15, 2006 looks pretty straight forward! thanks!I'll try it out tonight when I get home... looks exactly like what I need!I'll let you knowthanks again!Pabs Link to comment Share on other sites More sharing options...
Pabs Posted February 16, 2006 Author Share Posted February 16, 2006 aspnetguy,the code works like a charm! exactly what I was looking for!! thanks for the great solution and for being so quick to respond to me!laterPabs Link to comment Share on other sites More sharing options...
aspnetguy Posted February 16, 2006 Share Posted February 16, 2006 aspnetguy,the code works like a charm! exactly what I was looking for!! thanks for the great solution and for being so quick to respond to me!laterPabs<{POST_SNAPBACK}> no problem, glad to help Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now