Jump to content

mulitple tabs...one form


Pabs
 Share

Recommended Posts

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

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

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

Javascript...it's been a while... :)more into php lately...can the same taks be done using php?

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...