CODEWITHSUNDEEP
javascriptasp.net
Itsumo Kokoro
Itsumo Kokoro

Reputation: 169

Javascript ASP.net set radio button enabled to false in modal pop up

how can i set the radio button enabled to false as default when modal is show via click of button. It does not disabled the radio button when clicking the button. How do I do it correctly. Thank you

my javascript function

function btnDefaultRadios() {

document.getElementById('<%= rdPermanent.ClientID %>').disabled = true;
            document.getElementById('<%= rdNonPermanent.ClientID %>').disabled = true;
            document.getElementById('<%= rdAdministrative.ClientID %>').disabled = true;
            document.getElementById('<%= rdTechnical.ClientID %>').disabled = true;
            document.getElementById('<%= rdWithhRata.ClientID %>').disabled = true;
            document.getElementById('<%= rdContractual.ClientID %>').disabled = true;
            document.getElementById('<%= rdCasual.ClientID %>').disabled = true;
        }

my button the triggers the modal

<asp:Button ID="btnAdd" runat="server" SkinID="button" Text="Add New Position" Width="168px"  OnClientClick="btnDefaultRadios(this);"/>

my modal - my controls were inside the panel

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Label1"
                PopupControlID="pnladd" BackgroundCssClass="modalBackground" OnOkScript="OkButtonClick()">
            </cc1:ModalPopupExtender>

Upvotes: 0

Views: 77

Answers (1)

Henry Lu
Henry Lu

Reputation: 381

a quick jsfiddle https://jsfiddle.net/8Lq73hye/ shows that your javascript should work if it was executed. you could put a break point in the developer's tools on your browser and step through the code to see if the disable logic is indeed working.

What could be happening is that your js is executing, but then the button click is causing a postback straight after. if you are on your local machine, this could happen quickly without you knowing.

To prevent the unexpected post back, make sure your btnDefaultRadios function returns false

function btnDefaultRadios() {
    document.getElementById('<%= rdPermanent.ClientID %>').disabled = true;
    document.getElementById('<%= rdNonPermanent.ClientID %>').disabled = true;
    document.getElementById('<%= rdAdministrative.ClientID %>').disabled = true;
    document.getElementById('<%= rdTechnical.ClientID %>').disabled = true;
    document.getElementById('<%= rdWithhRata.ClientID %>').disabled = true;
    document.getElementById('<%= rdContractual.ClientID %>').disabled = true;
    document.getElementById('<%= rdCasual.ClientID %>').disabled = true;
    return false;
}

That the return false will stop the post back. A common mistake is also forgetting to return that function result on the OnClientClick call, so you must also change your OnClientClick to be

<asp:Button ID="btnAdd" runat="server" ...  OnClientClick="return btnDefaultRadios(this);"/>

EDIT:

A simplified working example of the aspx:

<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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>Test Client Side JS on Button Click</title>
    <script>
        function btnDefaultRadios()
        {
            document.getElementById('<%= rdPermanent.ClientID %>').disabled = true;
            document.getElementById('<%= rdNonPermanent.ClientID %>').disabled = true;
            return false;
        }

        function OkButtonClick(){}
    </script>
    <style>
        #pnladd
        {
            background-color: #fff;
        }
         .modalBackground
         {
             background-color: #666;
             background-color: rgba(200,200,200,0.75);
         }
    </style>
</head>
<body>
    <form id="HtmlForm" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
            <asp:Label runat="server" ID="Label1">label1</asp:Label>
            <asp:Button ID="btnAdd" runat="server" Text="Add New Position" 
                Width="168px" OnClientClick="return btnDefaultRadios(this);" />
            <asp:Panel runat="server" ID="pnladd" Width="300" Height="300">
                <asp:RadioButton runat="server" ID="rdPermanent" Text="Permanent"/>
                <asp:RadioButton runat="server" ID="rdNonPermanent" Text="Non Permanent"/>
            </asp:Panel>
            <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="btnAdd"
                PopupControlID="pnladd" BackgroundCssClass="modalBackground" OnOkScript="OkButtonClick()">
            </cc1:ModalPopupExtender>
        </div>
    </form>
</body>
</html>

Upvotes: 1

Related Questions