Home > JavaScript Development > Multiforms with javascript control how to?

Multiforms with javascript control how to?



I抳e to many fields in my form, so I thought to group them in separate layers I call TAB forms. My initial idea was to divide my form fields in <div抯> with id抯 so javascript can access them. A button or link with some css inside eatch <div> would activate a javascript function and change the display for those <div抯>. At document load all but one <div> are hide with style=攄isplay:none;?, those fields didn抰 got hide.

Any help somebody?

    
Guest


Do you mean something like:




Code:




<html>

<head>

<style type='text/css'>

div.tab {background-color:buttonface; border-style:solid solid none solid; border-width:1px; position:absolute; top:20; 



width:100; text-align:center; cursor:default;}

div.content {background-color:buttonface; border-style:solid solid solid solid; border-width:1px; position:absolute; top:39; 



width:400; left:50; height:400; text-align:left; padding-left:5px; padding-right:5px; padding-top:5px; z-index:2; 



visibility:hidden;}

</style>

<script type='text/javascript'>

function selectTab(value) {

	i = 1

	while (document.getElementById("tab_" + i)) {

		document.getElementById("tab_" + i).style.borderStyle = "solid solid solid solid"

		document.getElementById("tab_" + i).style.zIndex = "1"

		document.getElementById("content_" + i).style.visibility = "hidden"

		i++

	}

	document.getElementById("tab_" + value).style.borderStyle = "solid solid none solid"

	document.getElementById("tab_" + value).style.zIndex = "3"

	document.getElementById("content_" + value).style.visibility = "visible"

}





</script>

</head>

<body onLoad='selectTab(1)'>

<div id='tab_1' style='left:50;' class='tab' onClick='selectTab(1)'>Style</div>

<div id='tab_2' style='left:150;' class='tab' onClick='selectTab(2)'>Attributes</div>

<div id='tab_3' style='left:250;' class='tab' onClick='selectTab(3)'>Text</div>

<div id='content_1' class='content'>

<form>

<p>Form 1</p>

<input type='text'><br>

<input type='button' value='submit'>

</form>

</div>

<div id='content_2' class='content'>

<p>Form 2</p>

<input type='radio'><br>

<input type='radio'><br>

<input type='button' value='submit'>

</form>

</div>

<div id='content_3' class='content'>

<p>Form 3</p>

<textarea>A textarea</textarea><br>

<input type='button' value='submit'>

</form>

</div>



</body>

</html>



Was this answer helpful ? Yes No   
Guest


Yes that抯 just about it. Thanks binky

I tried adapt it to my page, but I'm having some problems in positioning those elements. Please take a look:



<html>

<head>

<style type='text/css'>

div.tab {background-color:buttonface; border-style:solid solid none solid; border-width:1px; position:absolute; top:20;

width:100; text-align:center; cursor:default;}



div.content {background-color:buttonface; border-style:solid solid solid solid; border-width:1px; position:absolute; top:39;

width:400; left:50; height:400; text-align:left; padding-left:5px; padding-right:5px; padding-top:5px; z-index:2;

visibility:hidden;}

</style>



<script type='text/javascript'>

function selectTab(value) {

i = 1

while (document.getElementById("tab_" + i)) {

document.getElementById("tab_" + i).style.borderStyle = "solid solid solid solid"

document.getElementById("tab_" + i).style.zIndex = "1"

document.getElementById("content_" + i).style.visibility = "hidden"

i++

}

document.getElementById("tab_" + value).style.borderStyle = "solid solid none solid"

document.getElementById("tab_" + value).style.zIndex = "3"

document.getElementById("content_" + value).style.visibility = "visible"

}

</script>

</head>



<body onLoad='selectTab(1)'>

<div align="center">

<FORM action='' method='post' id='formUser' name='formUser'>

<table width='752' border='1' cellpadding='0' cellspacing='0'>

<tr><td Class='ImageTop' style='visibility:visible;' height='20'>

<font style='position:relative; top:0px;right:5px;'>Novo Utilizador</font></td></tr>

<tr><td width='100%'>

<TABLE Class='form' border='1'>

<div id='tab_1' style='position:static;left:0;top:0;' class='tab' onClick='selectTab(1)'>Style</div>

<div id='tab_2' style='position:relative;left:100;top:-21px;' class='tab' onClick='selectTab(2)'>Attributes</div>

<div id='tab_3' style='position:relative;left:200;top:-42px;' class='tab' onClick='selectTab(3)'>Text</div>

<div id='content_1' class='content' style='position:relative;left:0;top:-42px;' >

<p>Form 1</p>

<input type='text'><br>

<input type='button' value='submit'>

</div>

<div id='content_2' class='content' style='position:relative;left:0;top:-100px;'>

<p>Form 2</p>

<input type='radio'><br>

<input type='radio'><br>

<input type='button' value='submit'>

</div>

<div id='content_3' class='content' style='position:relative;left:0;top:-200px;'>

<p>Form 3</p>

<textarea>A textarea</textarea><br>

<input type='button' value='submit'>

</div>

</TABLE>

</td></tr>

</table>

</form>

</div>

</body>

</html>

Was this answer helpful ? Yes No   
Guest


Ok, my mistake. Style already has de positioning.

Thanks

Was this answer helpful ? Yes No   
Guest
Answer it
Ask Question About JavaScript Development
 
 
Home - About Infoqu - Contact - Privacy Statement - Link to Infoqu - Bookmark Infoqu

Copyright 2007-2010 by Infoqu. All rights reserved