sugeet_s
05-22-2006, 11:15 AM
I am hiding One div and displaying another and I want to pass the value from one div to another without reload of the form. I have similar problem where I want to set the property Autopostback of the link button. Can I set this property or not.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" >
<title>Untitled Page</title>
<script language="javascript" >
function show_div_next(i)
{
// hide all the divs
// show the requested div
if(i=='the_div_1')
{
alert("harsh");
document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_3').style.display = 'none';
document.getElementById('the_div_4').style.display = 'none';
document.getElementById('the_div_2').style.display = 'block';
}
else if (document.getElementById('the_div_2').style.display == 'block')
{
document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_2').style.display = 'none';
document.getElementById('the_div_4').style.display = 'none';
document.getElementById('the_div_3').style.display = 'block';
}
else if (document.getElementById('the_div_3').style.display == 'block')
{
document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_2').style.display = 'none';
document.getElementById('the_div_3').style.display = 'none';
document.getElementById('the_div_4').style.display = 'block';
}
}
function show_div_previous()
{
// hide all the divs
document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_2').style.display = 'none';
document.getElementById('the_div_3').style.display = 'none';
document.getElementById('the_div_4').style.display = 'none';
// show the requested div
if(document.getElementById('the_div_4').style.display == 'block')
{
document.getElementById('the_div_3').style.display = 'block';
}
else if (document.getElementById('the_div_3').style.display == 'block')
{
document.getElementById('the_div_2').style.display = 'block';
}
else if (document.getElementById('the_div_2').style.display == 'block')
{
document.getElementById('the_div_1').style.display = 'block';
}
else
{
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a href="" onclick="show_div('the_div_1'); return false;">Div 1</a>
<a href="" onclick="show_div('the_div_2'); return false;">Div 2</a>
<a href="" onclick="show_div('the_div_3'); return false;">Div 3</a>
<div id="the_div_1" >This is div 1
<asp:TextBox ID="txtName" runat=server></asp:TextBox>
</div>
<div style="display: none;" id="the_div_2">This is div 2
<asp:Label runat=server ID="lbl2" Text='<%=txtName.Text%>'></asp:Label>
<asp:TextBox ID="TextBox1" runat=server ></asp:TextBox>
</div>
<div style="display: none;" id="the_div_3">This is div 3
<asp:TextBox ID="TextBox2" runat=server></asp:TextBox>
</div>
<div style="display: none;" id="the_div_4">This is div 4
<asp:Label runat=server ID="Label1" Text='<%=txtName.Text%>'></asp:Label>
<asp:Label runat=server ID="Label2" Text='<%=TextBox1.Text%>'></asp:Label>
<asp:Label runat=server ID="Label3" Text='<%=TextBox2.Text%>'></asp:Label>
</div>
<a href="" id = "lbtnNext" onclick="show_div_next('the_div_1'); return false;" style="z-index: 102; left: 448px; position: absolute; top: 200px">Next1</a>
<a href="" id = "A1" onclick="show_div_next('the_div_2'); return false;" style="z-index: 102; left: 448px; position: absolute; top: 220px">Next2</a>
<a href="" id = "A2" onclick="show_div_next('the_div_3'); return false;" style="z-index: 102; left: 448px; position: absolute; top: 240px">Next3</a>
<a href="" id = "lbtnPrevious" onclick="show_div_previous(); return false;" Style="z-index: 101; left: 24px;
position: absolute; top: 192px">Previous</a>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server" >
<title>Untitled Page</title>
<script language="javascript" >
function show_div_next(i)
{
// hide all the divs
// show the requested div
if(i=='the_div_1')
{
alert("harsh");
document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_3').style.display = 'none';
document.getElementById('the_div_4').style.display = 'none';
document.getElementById('the_div_2').style.display = 'block';
}
else if (document.getElementById('the_div_2').style.display == 'block')
{
document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_2').style.display = 'none';
document.getElementById('the_div_4').style.display = 'none';
document.getElementById('the_div_3').style.display = 'block';
}
else if (document.getElementById('the_div_3').style.display == 'block')
{
document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_2').style.display = 'none';
document.getElementById('the_div_3').style.display = 'none';
document.getElementById('the_div_4').style.display = 'block';
}
}
function show_div_previous()
{
// hide all the divs
document.getElementById('the_div_1').style.display = 'none';
document.getElementById('the_div_2').style.display = 'none';
document.getElementById('the_div_3').style.display = 'none';
document.getElementById('the_div_4').style.display = 'none';
// show the requested div
if(document.getElementById('the_div_4').style.display == 'block')
{
document.getElementById('the_div_3').style.display = 'block';
}
else if (document.getElementById('the_div_3').style.display == 'block')
{
document.getElementById('the_div_2').style.display = 'block';
}
else if (document.getElementById('the_div_2').style.display == 'block')
{
document.getElementById('the_div_1').style.display = 'block';
}
else
{
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<a href="" onclick="show_div('the_div_1'); return false;">Div 1</a>
<a href="" onclick="show_div('the_div_2'); return false;">Div 2</a>
<a href="" onclick="show_div('the_div_3'); return false;">Div 3</a>
<div id="the_div_1" >This is div 1
<asp:TextBox ID="txtName" runat=server></asp:TextBox>
</div>
<div style="display: none;" id="the_div_2">This is div 2
<asp:Label runat=server ID="lbl2" Text='<%=txtName.Text%>'></asp:Label>
<asp:TextBox ID="TextBox1" runat=server ></asp:TextBox>
</div>
<div style="display: none;" id="the_div_3">This is div 3
<asp:TextBox ID="TextBox2" runat=server></asp:TextBox>
</div>
<div style="display: none;" id="the_div_4">This is div 4
<asp:Label runat=server ID="Label1" Text='<%=txtName.Text%>'></asp:Label>
<asp:Label runat=server ID="Label2" Text='<%=TextBox1.Text%>'></asp:Label>
<asp:Label runat=server ID="Label3" Text='<%=TextBox2.Text%>'></asp:Label>
</div>
<a href="" id = "lbtnNext" onclick="show_div_next('the_div_1'); return false;" style="z-index: 102; left: 448px; position: absolute; top: 200px">Next1</a>
<a href="" id = "A1" onclick="show_div_next('the_div_2'); return false;" style="z-index: 102; left: 448px; position: absolute; top: 220px">Next2</a>
<a href="" id = "A2" onclick="show_div_next('the_div_3'); return false;" style="z-index: 102; left: 448px; position: absolute; top: 240px">Next3</a>
<a href="" id = "lbtnPrevious" onclick="show_div_previous(); return false;" Style="z-index: 101; left: 24px;
position: absolute; top: 192px">Previous</a>
</form>
</body>
</html>