Javascript not firing in checkbox change

meeram395

I have a checkbox in my form. When the checkbox is checked , i want to fire a javascript which makes some controls as visible or not visible. I have writtent the code,but the javascript is not firing. Can anybody please help me on that? Am I doing something wrong here? Following is my code: <script type="text/javascript"> function SetCopyPermissionsControlState(panelControlId, checkBox) { alert("hai"); var enabled = checkBox.checked; var panelControl = document.getElementById(panelControl); if (panelControl) { if (enabled) { panelControl.style.display = 'block'; } else { panelControl.style.display = 'none'; } } <tr><td class="labeltext"><asp:CheckBox ID="chkCopyPermissions" runat="server" Text = "CopyPermissions;" OnClick="SetCopyPermissionsControlState(CopyPermissionsPanel,this)" /></td> <td><asp:Label ID="lblCopyPermissionMessage" runat="server" ></asp:Label></td> </tr> <tr> <asp:Panel ID = "CopyPermissionsPanel" runat = "server" Visible="false"> <td class="labeltext"><asp:Label ID = "lblCopyPermissions" runat = "server" Text = "Existing UserName" ></asp:Label></td> <td><asp:TextBox id = "ExistingLoginTextBox" runat="server" TextMode="SingleLine" MaxLength="50"></asp:TextBox> <asp:Button ID = "CopyPermissionsButton" runat="server" Text="Copy" OnClick="CopyPermissionsButton_Click" /> </td> </asp:Panel> </tr> Please help.

Success is the good fortune that comes from aspiration, desperation, perspiration and inspiration.

AB7771

var panelControl = document.getElementById(panelControl); Please pass the actual proper id to the method. I guess it should be panelControlId

Thanks & Regards, Pramod "Everyone is a genius at least once a year"

N a v a n e e t h

meeram395 wrote:

var panelControl = document.getElementById(panelControl);

Shouldn't this be var panelControl = document.getElementById(panelControlId);?

meeram395 wrote:

OnClick="SetCopyPermissionsControlState(CopyPermissionsPanel,this)"

Don't you need a single quote (')? OnClick="SetCopyPermissionsControlState('CopyPermissionsPanel',this) When you are using server control id in JS, best practice is to use ClientId. Your code will break if you plan to make the panel as a child of some other container control because ASP.NET will change the name when it render the control. :)

Navaneeth How to use google | Ask smart questions

meeram395

ok. thanks. now the javascript is firing. but the panelcontrolid is firing. I opened View-->Source, but couldn't find the control asp panel. what could be the issue? Any guess?

Success is the good fortune that comes from aspiration, desperation, perspiration and inspiration.

N a v a n e e t h

meeram395 wrote:

but the panelcontrolid is firing.

What do you mean?

meeram395 wrote:

I opened View-->Source, but couldn't find the control asp panel. what could be the issue?

Browsers only understand HTML. ASP.NET will convert ASP:Panel to HTML DIV (not sure) when it is rendering the page. So you don't see ASP:Panel in the view source. :)

Navaneeth How to use google | Ask smart questions

Lost User

try to make auto post back property = true;

meeram395

I have removed the panel control and I put an id to row.Now it is working fine. Following is the codew: <tr><td class="labeltext"><asp:CheckBox ID="chkCopyPermissions" runat="server" Text = "CopyPermissions" OnClick="SetCopyPermissionsControlState('CopyPermissionsRow',this)" /></td> <td><asp:Label ID="lblCopyPermissionMessage" runat="server" ></asp:Label></td> </tr> <tr id="CopyPermissionsRow" visible="false"> <td class="labeltext"> <asp:Label ID = "lblCopyPermissions" runat = "server" Text = "Existing UserName" ></asp:Label> </td> <td> <asp:TextBox id = "ExistingLoginTextBox" runat="server" TextMode="SingleLine" MaxLength="50"></asp:TextBox> <asp:Button ID = "CopyPermissionsButton" runat="server" Text="Copy" OnClick="CopyPermissionsButton_Click" /> </td> </tr> Because of the above change, the javascript function , SetCopyPermissionsControlState, is firing now. But the issue is, I made it visible=false when the page loads which is not happening. The page loads by displaying the controls. However, when I check the checkboxes, it is changing accordingly. Any idea why it is not happening for the first time? I don't want postback, because there is a password textbox in the form which erases the value on postback. Following is my javascript function:

function SetCopyPermissionsControlState(rowControlId, checkBox) {

        var enabled = checkBox.checked;
        alert("enabled" + enabled);
        var rowControl = document.getElementById(rowControlId);
        alert("panelControl" + rowControl);

        if (rowControl) 
        {
            if (enabled) 
            {
                rowControl.style.display = '';
                
            }
            else 
            {
                rowControl.style.display = 'none';
              
            }
        }

    }

Success is the good fortune that comes from aspiration, desperation, perspiration and inspiration.

meeram395

I don't want autopostback property to true, since there is a password textbox in the page which is losing value on postback. so everytime there is a postback, the user has to retype which is quite cumbersome. Is there any other way?

Success is the good fortune that comes from aspiration, desperation, perspiration and inspiration.