CODEWITHSUNDEEP
c#jqueryasp.net
Jimushi
Jimushi

Reputation: 121

validation of a dropdownlist with jquery not working

I have a dropdownlist in a table with a blank item in it, I want a error message showed in a label if a button is pressed while that blank item is selected in the dropdrownlist

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownListParedesinteriores_ItemChanged">
                            <asp:ListItem Text="" Value="-1"></asp:ListItem>
                            <asp:ListItem Value='5'>Excellent</asp:ListItem>
                            <asp:ListItem Value="4">Very good</asp:ListItem>
                            <asp:ListItem Value="3">Good</asp:ListItem>
                            <asp:ListItem Value="2">Bad</asp:ListItem>
                            <asp:ListItem Value="1">Very bad</asp:ListItem>
                        </asp:DropDownList>

<asp:Button ID="Button1" runat="server" Text="Button" />

<asp:Label ID="Label9" runat="server" Text=""></asp:Label>

This is my Jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script>
        $(document).ready(function ()
        {
            $("#Button1").click(function ()
            {
                var a = $("#<%= DropDownList1.ClientID %>");
                if (a.val() === "-1")
                {
                    document.getElementById("Label9").innerHTML = "<b>Please select an option</b>";
                    document.getElementById("Label9").style.color = "red";
                }
                else
                {
                    document.getElementById("Label9").innerHTML = "<b>Comfirmed</b>";
                    document.getElementById("Label9").style.color = "green";
                }
            })
        })

    </script>

Upvotes: 0

Views: 147

Answers (2)

Wamiq Rehman
Wamiq Rehman

Reputation: 566

First of all this button is a server side button you have to disable postaback to make it work on client side by using onClientClick="return false" .Secondly in order to use Button1 as id($("#Button1")) you need to change ClientIDMode to static same goes for the label

  <asp:Button ID="Button1" runat="server" Text="Button"  onClientClick="return false"  ClientIDMode="Static" />
  <asp:Label ID="Label9" runat="server" Text="" ClientIDMode="Static"></asp:Label>

if you dont want to use static client id you have to replace

$("#Button1") with  $("#<%= Button1.ClientID %>")   
document.getElementById("Label9") with document.getElementById("<%= Label9.ClientID %>")

Upvotes: 1

TheYellowSquares
TheYellowSquares

Reputation: 90

Your button 1 selector "$("#Button1).click" click event does not consider the client ID like your dropdown list does. That may be causing the issue if jquery finds nothing for button 1 and the click event never gets triggered.

A possible fix is to change the selector to the same as you do in the line where you use jquery to get the dropdown list.

Upvotes: 1

Related Questions