[RESOLVED]asp.net checkbox client event not getting invoked

Hi,

I have a asp.net checkbox, in which i have a onclientclick javascript function called. If the checkbox is checked, I am trying to make a "asp:panel" visible.

I have tried the below code, but without success:

function toggleVisibility(cb) {
        var x = document.getElementById('<%=pnlTestID %>');
        if (cb.checked == true)
            x.style.display = "block";
        else
            x.style.display = "none";
    }


 <asp:CheckBox ID="chkTest" runat="server" Text="Test ID" OnClientClick="javascript:toggleVisibility(this); return false"  />

  <asp:Panel ID="pnlTestID" runat="server" Visible="false">

//some other controls

</asp:Panel>

How to fix this?

Thanks

Hi,

Have a look at this article.  It may explain the behavior you are experiencing.

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.checkbox.autopostback(v=vs.110).aspx

HTH, Benjamin

Instead of OnClientClick, you need to write OnChange event of Checkbox. Also, you have set Panel’s Visible property to false; this is a server side property and by setting it to false will mean that the panel will never render on the page, since you will
always get null in JavaScript when you try to access the panel; hence, you should set the display:none style property instead of visible=false. Here is a working example:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function toggleVisibility() {
            var pnlTestID = document.getElementById("<%=pnlTestID.ClientID %>");
            if (document.getElementById("<%=chkTest.ClientID%>").checked == true)
                pnlTestID.style.display = "block";
            else
                pnlTestID.style.display = "none";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:CheckBox ID="chkTest" runat="server" Text="Test ID" onchange="toggleVisibility();" />
            <asp:Panel ID="pnlTestID" runat="server" Style="display: none">
                Test Panel
            </asp:Panel>
        </div>
    </form>
</body>
</html>

hope it helps./.

EDIT: removed this in javascript.

Hi,

I tried the above code.

Initially the checkbox is not checked, so the panel should be hidden. But When the checkbox is not checked also, i can see the contents of the panel.

Also, the above code does not seem to work.

Thanks

 

venkatzeus

Initially the checkbox is not checked, so the panel should be hidden. But When the checkbox is not checked also, i can see the contents of the panel.

Also, the above code does not seem to work.

The code seems 100% fine on my side. Panel is hidden initially because I have set the style as "display:none". Also, when checkbox is not checked the panel is hidden. Try running above code in separate application and it will work. There might be some other
script issue on your page. Please check.

Hi,

have you removed Visible="false" and added style="display:none;"> 

bcz Visible=false is the server side code and you cannot handle those element in client side javascript. as given by kaushal change your code. it should work..

Hi,

In the view source, i can see the below:

function toggleVisibility() {
        var x = document.getElementById('System.Web.UI.WebControls.Panel');
        if (document.getElementById('ctl00_SPWebPartManager1_g_0e49dae5_6b94_4d19_95c9_cb638a841bc9_chkTest').checked == true) {
            x.style.display = "block";
        }
        else { x.style.display = "none"; }

And, there is a javascript error which is “Unable to get value of the property ‘style’: object is null or undefined”

Also, in viewsource, i see the below for the panel:

    <div id="ctl00_g_0e49dae5_6b94_4d19_95c9_cb638a841bc9_pnlTest" style="display: none">

I am not sure, how the panel rendered as a div.

Thanks

Hi,

you have to use 

 var x= document.getElementById("<%=pnlTestID.ClientID
%>"
);  instead of var x= document.getElementById("<%=pnlTestID %>");

panels will render as div only at client..

pls refer kaushal’ rly..

venkatzeus

var x = document.getElementById('System.Web.UI.WebControls.Panel');

Something is not correct at this line.

Have you tried retrieving the panel as:

            var x = document.getElementById("<%=pnlTestID.ClientID %>");

Hi,

The below code works fine in Mozilla, but not in IE 9 .

<script type="text/javascript">
        function toggleVisibility() {
            var pnlTestID = document.getElementById("<%=pnlTestID.ClientID %>");
            if (document.getElementById("<%=chkTest.ClientID%>").checked == true)
                pnlTestID.style.display = "block";
            else
                pnlTestID.style.display = "none";
        }
    </script>
</head>

            <asp:CheckBox ID="chkTest" runat="server" Text="Test ID" onchange="toggleVisibility(); return false" />

Thanks

 

There is no need to write return false. Try to set a test alert in script to check it executes or not

use jquery (jquery 1.4.4)..something like this:

http://jsfiddle.net/karim79/2hw89/1/

<script type="text/javascript">
$('#chkTest').change(function(){ 
$('#pnlTestID').toggle(this.checked).focus();
});
</script>

HI,

Thanks for the reply.

I even tried removing the "return false". But the same issue is shown in IE 8, 9.

Hello There,

Try To use JQuery to do this Cool

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
 
 <script type="text/javascript">
     jQuery.noConflict();
     jQuery(document).ready(function () {


         jQuery('#<%=chkTest.ClientID%>').click(function () {
             jQuery("#<%=pnlTestID.ClientID %>").toggle(this.checked);
         });

     });

     

 </script>

 <style type="text/css">
 .pnlStyle
 {
     display:none;
 }
 </style>


    <asp:CheckBox ID="chkTest" runat="server" Text="Test ID" />

  <asp:Panel ID="pnlTestID" runat="server" CssClass="pnlStyle">
      <asp:Label ID="lblDemo" runat="server" Text="Label Demo Text"></asp:Label>

</asp:Panel>

Leave a Reply