I have the following code which suppoesedly disables or enables a textbox depending on the value in a drop down list.

Now this is how I am making a reference to this code from the drop down lists:

Unfortunately, the code is generating an exception. I believe that I am using the wrong event handler, that is, OnSelectedIndexChanged. How can I remedy the situation please?

I have the following code which suppoesedly disables or enables a textbox depending on the value in a drop down list.

Now this is how I am making a reference to this code from the drop down lists:

Unfortunately, the code is generating an exception. I believe that I am using the wrong event handler, that is, OnSelectedIndexChanged. How can I remedy the situation please?

• c#
• javascript
• asp
• drop-down-menu
• textbox

4 Answers 4

1) replace OnSelectedIndexChanged with onchange

and

2) replace

var DropDown_Total = document.getElementById("DropDown_Total")

with

var DropDown_Total = document.getElementById("<%= DropDown_Total.ClientID %>")

for all getElementById

3) replace (DropDown_Date.options[DropDown_Date.selectedIndex].value with (DropDown_Date.options[DropDown_Date.selectedIndex].text for both dropdown

try this it's working

<script type="text/javascript">
    function DisableEnable() {
        var DropDown_Total = document.getElementById("<%= DropDown_Total.ClientID %>")
        var Textbox_Total = document.getElementById("<%= Textbox_Total.ClientID %>")
        var DropDown_Date = document.getElementById("<%= DropDown_Date.ClientID %>")
        var Textbox_Date = document.getElementById("<%= Textbox_Date.ClientID %>")

        if (DropDown_Total.options[DropDown_Total.selectedIndex].text == "Any Amount") {

            Textbox_Total.disabled = true;
        }

        else {
            Textbox_Total.disabled = false;
        }

        if (DropDown_Date.options[DropDown_Date.selectedIndex].text == "Any Date") {
            Textbox_Date.disabled = true;
        }

        else {
            Textbox_Date.disabled = false;
        }
    }
</script>

html

<asp:TextBox runat="server" ID="Textbox_Total" />
<asp:TextBox runat="server" ID="Textbox_Date" />
<asp:DropDownList ID="DropDown_Total" runat="server" onchange="DisableEnable();">
    <asp:ListItem>Any Amount</asp:ListItem>
    <asp:ListItem>Exact Amount</asp:ListItem>
    <asp:ListItem>Below Amount</asp:ListItem>
    <asp:ListItem>Above Amount</asp:ListItem>
</asp:DropDownList>
<asp:DropDownList ID="DropDown_Date" runat="server" onchange="DisableEnable();">
    <asp:ListItem>Any Date</asp:ListItem>
    <asp:ListItem>Exact Date</asp:ListItem>
    <asp:ListItem>Before</asp:ListItem>
    <asp:ListItem>After</asp:ListItem>
</asp:DropDownList>

Use onchange event which will work for javascript function calling. OnSelectedIndexChanged is server side event.

just replace OnSelectedIndexChanged with onchange because onchange is handled by js. OnSelectedIndexChanged is handled by code behind.

Tutorial: how to disable/enable textbox using DropDownList in Javascript

In this function we pass dropdownlist id and textbox id as parameter in js function

  <script type="text/javascript">
    function DisableEnableTxtbox(DropDown, txtbox) {

        if (DropDown.options[DropDown.selectedIndex].text == "free") {

            txtbox.disabled = true;
        }

        else {
            txtbox.disabled = false;
        }

    }
  </script>

Now add the following code:

 <td align="center" class="line">
        <asp:DropDownList ID="ddl_MonP1" runat="server" CssClass="ppup2"   onchange="DisableEnableTxtbox(this,txt_MonP1);"></asp:DropDownList>
        <asp:TextBox ID="txt_MonP1" runat="server" CssClass="ppup" placeholder="Subject"></asp:TextBox>
       </td>