Menu per caricamento aree di un form

[Valeria75_bis]

Ciao a tutti, ho una pagina strutturato in questo modo:

Menu superiore
Area laterale
Area centrale

io ho un form molto complesso da gestire, intendo con molti campi e vorrei semplificare la gestione lato UI....

vorrei quindi fare in modo che cliccando nelle voci dell'elenco di sinistra (Area1, Area2, Area3....) vengano visualizzate le aree di riferimento tra i campi del form .... quindi vorrei visualizzare solo determinati campi (ad esempio contenuti in un panel) cliccando sulle voci dell'elenco Area1, Area2, Area3, Area4.....


Grazie a tutti!!! posto un esempio della pagina

 


	<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="Email">
	<div id="actions">
		<ul id="jsddm">
			<li id="action_reply">
				<a class="" style="opacity: 1;" href="http://localhost/appname/backoffice/public/index.php?cmd=customer.showall">
					<span>
						[img]demo_files/list_icon.png[/img]
						<strong style="cursor: pointer;">Menu 1[/b]
					</span>
				</a>
			
			<li id="action_reply">
				<a class="" style="opacity: 1;" href="http://localhost/appname/backoffice/public/index.php?cmd=customer.shownew">
					<span>
						[img]demo_files/add.png[/img]
						<strong style="cursor: pointer;">Menu 2[/b]
					</span>
				</a>
			
			<li id="action_reply">
				<a class="" style="opacity: 1;">
					<span>
						[img]demo_files/user_edit.png[/img]
						<strong style="cursor: pointer;">Menu 3[/b]
					</span>
				</a>
			
			<li id="action_reply">
				<a class="" style="opacity: 1;">
					<span>
						[img]demo_files/close.png[/img]
						<strong style="cursor: pointer;">Menu 4[/b]
					</span>
				</a>
			
			<li id="action_reply">
				<a class="" style="opacity: 1;">
					<span>
						[img]demo_files/user_search.png[/img]
						<strong style="cursor: pointer;">Menu 5[/b]
					</span>
				</a>
			
		[/list]
	</div><div id="primary">
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom" id="messageList">
	
	<div class="" id="primary_header">
		<span id="loading"></span>
		<div id="back_button">
			<a href="javascript:submitForm('CustForm')">
				<span class="stronglastword">Salva modifiche</span>
			</a>
		</div>
	</div>

	<div id="primary_content">
		
		[img]demo_files/ajax-loader_s.gif[/img]
		
		<table cellpadding="0" cellspacing="0">
			<tbody><tr>
				<td style="padding: 0pt;" width="100%">		
					<div id="#bodycontent">
					
						<form id="CustForm" method="post" action="index.php">
												
						<div class="form_inputs" style="position: relative;">
							<table class="settings">
								<tbody>	
								<tr>
									<td class="label">Address</td>
									<td>
										<input class="medium required" name="address" id="address" type="text">
										Customer's address
									</td>
								</tr>
								<tr>
									<td class="label">ZIP</td>
									<td>
										<input class="medium required" name="zip" id="zip" type="text">
										Customer's zip code
									</td>
								</tr>
								</tbody>
							</table>
							</div>
							<div class="divider"></div>
						</form> 
													
					</div>
				</td>
			</tr>
		</tbody>
		</table>		
	</div>
</div>
</div>
	<div id="secondary">
	<ul id="nav_secondary">
		[*]
		<div isselectable="true" id="folder_inbox" class="current"><a class="ui-droppable" href="#"> <span class="label">Area 1</span> <span class="unread" style="">6</span>
		</a></div>
		
		[*]
		<div class="" isselectable="true" id="folder_drafts"><a class="ui-droppable" href="#"> <span class="label">Area 2</span> <span class="unread" style="display: none;">0</span> 
		</a></div>
		
		[*]
		<div class="" isselectable="true" id="folder_sent"><a class="ui-droppable" href="#"> <span class="label">Area 3</span> <span class="unread" style="display: none;">0</span>
		</a></div>
		
		[*]
		<div class="" isselectable="true" id="folder_spam"><a class="ui-droppable" href="#"> <span class="label">Area 4</span> <span class="unread" style="display: none;">0</span>
		</a></div>
		
		[*]
		<div class="" isselectable="true" id="folder_trash"><a class="ui-droppable" href="#"> <span class="label">Area 5</span> <span class="unread" style="display: none;">0</span>
		</a></div>
		
	[/list]
	</div>

</div><div id="ui-datepicker-div" style="display: none;"></div>

[cavicchiandrea]

Ma la domanda/dubbio qual'è?

[Valeria75_bis]

La domanda è che non so come fare questo:

vorrei quindi fare in modo che cliccando nelle voci dell'elenco di sinistra (Area1, Area2, Area3....) vengano visualizzate le aree di riferimento tra i campi del form .... quindi vorrei visualizzare solo determinati campi (ad esempio contenuti in un panel) cliccando sulle voci dell'elenco Area1, Area2, Area3, Area4.....

nel senso che ho creato la struttura.....

area di sinistra con Area1, Area2, Area....

area centrale con i miei campi (praticamente il form), per ne ho inseriti pochi ma ipotizziamo di averne molti

ora, basandomi su questa struttura, vorrei fare in modo che cliccando su ogni link relativo alle Aree (Area1, Area2, Area3....), vengano visualizzate solo determinate aree del form... il tutto per evitare di visualizzare troppi campi all'utente e semplificare la compilazione solo dei campi interessati


Grazie mille

[cavicchiandrea]

E non sai impostare i css in display:none e mostrarli al click document.getElementById('area1').style.display='bl ock' dopo tanti anni che frequenti il forum non ci credo

Oltretutto hai fatto cross-post con php