Controls' visibility property, modified by JavaScript, is ignored after postback

StackOverflow https://stackoverflow.com/questions/1821646

Question

My javascript code modifies some properties, visibility included. After postback, some properties stuck, others are "forgotten". Here I try to change the Text property of a textbox and the visibility property of a label to 'hidden'. After postback, the text is preserved, but the label is shown. I would very much like to keep the label hidden after the postback. The same occurs with the 'display' CSS property. Or, if I try to hide a <div>. Any help would be very much appreciated:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ShowHide.aspx.cs" Inherits="WebApplication1.ShowHide" %>

<!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 type="text/javascript" language="javascript">
        function ShowHide()
        {
            debugger;
            var txt = document.getElementById('txtNumber');
            txt.value='4';
            var lbl = document.getElementById('lblShowHide');
            if(lbl.style.visibility == 'hidden')
            {
                lbl.style.visibility = '';
            }
            else
            {
                lbl.style.visibility = 'hidden';
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:Label ID="lblNumber" runat="server" Text="Enter Number" />
        <asp:TextBox ID="txtNumber" runat="server" Text="5" />
        <asp:Label ID="lblShowHide" runat="server" Text="Show" />
        <input id="btnChangeByJS" type="button" value="HTML Change by JavaScript" onclick="ShowHide();" />
        <asp:Button ID="cmdSubmit" runat="server" Text="ASP Submit" />
        <asp:HiddenField ID="hfShowHide" runat="server" />
    </div>
    </form>
</body>
</html>

Thank you!

Was it helpful?

Solution

A postback is just another way of saying the html form was submitted. When you submit a form, the only things sent to the server are the value and name properties of the input and select elements in the form. That's why your "text" is preserved: it's the value attribute of that element. If you want to also preserve your visibility changes, or any other changes, you need to add an element to your form that can hold these changes somehow in it's value attribute.

That's essentially what ViewState is; an extra hidden element whose value property holds the current state of controls. But ViewState works for maintaining state between server instances of your page. It's not for moving new changes from the client to the server.

OTHER TIPS

Hook on the client side pageLoad event and hide the text box there. Example:

function pageLoad() {
        var txt = document.getElementById('txtNumber');
        txt.value='4';
        var lbl = document.getElementById('lblShowHide');
        if(lbl.style.visibility == 'hidden')
        {
            lbl.style.visibility = '';
        }
        else
        {
            lbl.style.visibility = 'hidden';
        }
}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top