CODEWITHSUNDEEP
javascriptasp.netvb.netdom-events
sona
sona

Reputation: 1552

How to enable or disable a asp button on dropdown selection value using Javascript function?

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>

Upvotes: 1

Views: 8529

Answers (4)

Ajay
Ajay

Reputation: 2080

I got this result by using jquery.

    <script src="https://code.jquery.com/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.com/jquery-1.10.2.min.js

2.The DropDown Default value(like "Select One") must be the value which you compare 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>

Upvotes: 1

Nimmi
Nimmi

Reputation: 690

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>

Upvotes: 0

adripanico
adripanico

Reputation: 1058

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) { ... }

Upvotes: 2

शेखर
शेखर

Reputation: 17614

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.com/Articles/34151/ASP-NET-4-0-Client-ID-Feature

Upvotes: 1

Related Questions