I have asp dropdown and button, I want to make the button always disable when dropdown selected value is index 0 and enable when some other value is selected.

My code, but it is not working:

function checkSelect()
{
if (document.getElementById('ddlSte').value == 'Select One')
   document.getElementById('StGoBtn').disabled = true;
else
   document.getElementById('StGoBtn').disabled = false;
}

controls:

<asp:DropDownList ID="ddlSte" runat="server" Width="162px" onchange='checkSelect(this);'>
             </asp:DropDownList>
                                                    
 <asp:Button ID="StGoBtn" CssClass="buttnStyle" runat="server" Text="GO>>"></asp:Button>

I have asp dropdown and button, I want to make the button always disable when dropdown selected value is index 0 and enable when some other value is selected.

My code, but it is not working:

function checkSelect()
{
if (document.getElementById('ddlSte').value == 'Select One')
   document.getElementById('StGoBtn').disabled = true;
else
   document.getElementById('StGoBtn').disabled = false;
}

controls:

<asp:DropDownList ID="ddlSte" runat="server" Width="162px" onchange='checkSelect(this);'>
             </asp:DropDownList>
                                                    
 <asp:Button ID="StGoBtn" CssClass="buttnStyle" runat="server" Text="GO>>"></asp:Button>

• javascript
• asp
• vb
• dom-events

Share Improve this question Follow edited May 1, 2021 at 9:28 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Feb 10, 2014 at 7:20 sonasona 1,55233 gold badges1818 silver badges3737 bronze badges 3

• 1 Show us the html you have for dropdown and button – Adil Commented Feb 10, 2014 at 7:22
• @Adil You can read my question that i am using asp dropdown and button – sona Commented Feb 10, 2014 at 7:24
• @son code seems fine, post the html code for dropdown, button and calling code – Linga Commented Feb 10, 2014 at 7:25

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Controls in Asp.NET have not the same ID as you have declared in your code.

First approach to get your solution working is to declare your DownDropList and your Button with the attribute ClientIDMode to Static. This way, rendered ID will be the same you declared in your code.

Best approach, is to use the @Șhȇkhaṝ proposal. You can, for example, define the onchange attribute as:

onchange='checkSelect(<%=ddlSte.ClientID %>, <%=StGoBtn.ClientID %>);'

And then redefine your checkSelect function as:

function checkSelect(ddlID, buttonID) { ... }

use <%=ddlSte.ClientID %> and <%=StGoBtn.ClientID %> in your code.

function checkSelect()
{
   if (document.getElementById('<%=ddlSte.ClientID %>').value == 'Select One')
       document.getElementById('<%=StGoBtn.ClientID %>').disabled = true;
   else
       document.getElementById('<%=StGoBtn.ClientID %>').disabled = false;
}

The Id of control get changed If you use msterpag or user control so you need to use ClientID to get the actual IP

More detail about client ID
http://www.codeproject./Articles/34151/ASP-NET-4-0-Client-ID-Feature

I got this result by using jquery.

    <script src="https://code.jquery./jquery-1.10.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("#<%=StGoBtn.ClientID%>").hide();
    $("#<%=ddlSte.ClientID%>").change(function () {

        if ($("#<%=ddlSte.ClientID%>").val() == "Select One") {
            $("#<%=StGoBtn.ClientID%>").hide();               
        }
        else {
            $("#<%=StGoBtn.ClientID%>").show();

        }

    });

});
</script>

Note:

1.Inorder to work with jquery we need to add below url at head section of your html page

https://code.jquery./jquery-1.10.2.min.js

2.The DropDown Default value(like "Select One") must be the value which you pare the value in jquery code i.e;if ($("#<%=ddlSte.ClientID%>").val() == "Select One")

3.You no need to add a function in your dropdown html.i.e; simply you can write it as show below.

<asp:DropDownList ID="ddlSte" runat="server" Width="162px"></asp:DropDownList>

try like this

In ASPX

   <div>  
    <select id="ddlSte" onchange="test();">
    <option value="0">select</option>
    <option value="1">1</option>
    <option value="2">2</option>
    </select> 
   </div>

In JavaScript

   <script type="text/javascript"> 

    $(document).ready(function () {

        if (document.getElementById('ddlSte').value == '0')
            document.getElementById('StGoBtn').disabled = true;
        else
            document.getElementById('StGoBtn').disabled = false;
    });
    function test() {

        if (document.getElementById('ddlSte').value == '0')
            document.getElementById('StGoBtn').disabled = true;
        else
            document.getElementById('StGoBtn').disabled = false;
    }
    </script>