How to make controls visible false using javascript...?

•

What is DaniWeb IT Discussion Community?

You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 391,648 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,866 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 12217 | Replies: 5

•

Join Date: Apr 2007

Posts: 26

Reputation: BalagurunathanS is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

BalagurunathanS BalagurunathanS is offline

Offline

Light Poster

How to make controls visible false using javascript...?

Aug 16th, 2007

Hi all..

I am having some controls in my aspx page.I need to write javascript for those controls for validation..For that i need to make the controls visible false in certain situation .I also want to make the controls to visible true in certain sitauations..Some one help me with javascript code for this..

Regards,
Balagurunathan S

•

Join Date: Feb 2005

Location: Braintree, UK

Posts: 1,164

Reputation: hollystyles will become famous soon enough

Rep Power: 7

Solved Threads: 58

hollystyles hollystyles is offline

Offline

Veteran Poster

Re: How to make controls visible false using javascript...?

Aug 16th, 2007

There are many ways to show/hide, render/not render a control
For ASP.NET webcontrols you have the Visible property which can be set to true or false but that's serverside.

For client side you have visibility attribute in CSS which can be "visible" or "hidden", here is an example:

 Help with Code Tags 
 asp Syntax (Toggle Plain Text) 
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ControlVisibilityClientSide.aspx.cs" Inherits="ControlVisibilityClientSide" %>
 
<!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>ControlVisibilityClientSide</title>
    <script type="text/javascript">
        function toggleVisibility(controlId)
        {
            var control = document.getElementById(controlId);
            if(control.style.visibility == "visible" || control.style.visibility == "")
                control.style.visibility = "hidden";
            else 
                control.style.visibility = "visible";
 
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <input type="button" ID="btnShowHide" value="Show/Hide" onclick="toggleVisibility('TextBox1');" /></div>
    </form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ControlVisibilityClientSide.aspx.cs" Inherits="ControlVisibilityClientSide" %>

<!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>ControlVisibilityClientSide</title>
    <script type="text/javascript">
        function toggleVisibility(controlId)
        {
            var control = document.getElementById(controlId);
            if(control.style.visibility == "visible" || control.style.visibility == "")
                control.style.visibility = "hidden";
            else 
                control.style.visibility = "visible";
              
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <input type="button" ID="btnShowHide" value="Show/Hide" onclick="toggleVisibility('TextBox1');" /></div>
    </form>
</body>
</html>

==========================================
Yadda yadda yadda...
Web junky, fevered monkey

•

Join Date: Apr 2007

Posts: 26

Reputation: BalagurunathanS is an unknown quantity at this point

Rep Power: 2

Solved Threads: 0

BalagurunathanS BalagurunathanS is offline

Offline

Light Poster

Re: How to make controls visible false using javascript...?

Aug 16th, 2007

Thanks Holly..I got it..

Regards,
Balagurunathan S

•

Join Date: Dec 2007

Posts: 2

Reputation: saars is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

saars

Offline

Newbie Poster

Re: How to make controls visible false using javascript...?

Dec 1st, 2007

Is it possible to use asp.net button instead of html button?

regrads
saars

•

Join Date: Feb 2005

Location: Braintree, UK

Posts: 1,164

Reputation: hollystyles will become famous soon enough

Rep Power: 7

Solved Threads: 58

hollystyles hollystyles is offline

Offline

Veteran Poster

Re: How to make controls visible false using javascript...?

Dec 3rd, 2007

Yes it is, an asp:Button will cause a postback and you can make controls visible property true/false server side. The OP asked for javascript to show/hide controls on the page client-side. The only reason to show/hide controls with javascript is because a postback serverside is a lot of network and server resources re-constructing a whole page just to hide/show one or two controls. So, as we were discussing client-side code an asp:Button was not necessary.

==========================================
Yadda yadda yadda...
Web junky, fevered monkey

•

Join Date: Dec 2007

Posts: 2

Reputation: saars is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

saars

Offline

Newbie Poster

Re: How to make controls visible false using javascript...?

Dec 3rd, 2007

Thanks for replying, but my problem is I have a dropdownlist, when i select 'others' ..... a textbox should appear..since i want to save to the back end.. so i need asp.net button...
thanks in advance.