Validate Cascading DropDownList (One dependent on another) using JavaScript

Last Reply on Mar 29, 2015 01:26 AM By Shaiwal

Posted on Mar 28, 2015 12:38 AM

Needing help to validate multiple dropdown lists. I am needing to figure out how I can create a C# code that allows this function.

Ex:

DropDownList1 select 'option1'  then DropDownList2, DropDownList4, DropDownList7 will be required to be filled out.

Using Button click will make a pop up alert window to tell users that they need to fill out a certain dropdownlist if that dropdown list is blank.

 

 


Posted on Mar 28, 2015 02:06 AM

Refer this code

HTML

<div id="Div1">
        <asp:DropDownList ID="DropDownList1" runat="server">
        <asp:ListItem></asp:ListItem>
            <asp:ListItem>Option1</asp:ListItem>
            <asp:ListItem>Option2</asp:ListItem>
            <asp:ListItem>Option3</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <asp:DropDownList ID="DropDownList2" runat="server">
            <asp:ListItem>Select Country</asp:ListItem>
            <asp:ListItem>India</asp:ListItem>
            <asp:ListItem>USA</asp:ListItem>
            <asp:ListItem>Australia</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <asp:DropDownList ID="DropDownList3" runat="server">
            <asp:ListItem>Select City</asp:ListItem>
            <asp:ListItem>New Delhi</asp:ListItem>
            <asp:ListItem>Mumbai</asp:ListItem>
            <asp:ListItem>NewYork</asp:ListItem>
            <asp:ListItem>Washington</asp:ListItem>
        </asp:DropDownList>
        <br />
        <br />
        <asp:Button ID="btnValidate" runat="server" Text="Validate" OnClientClick="return Validate()" />
    </div>

Javascript

<script type="text/javascript">
    function Validate() {
        var FirstDDL = document.getElementById('<%=DropDownList1.ClientID%>');
        var SecondDDL = document.getElementById('<%=DropDownList2.ClientID%>');
        var ThirdDDL = document.getElementById('<%=DropDownList3.ClientID%>');
        if (FirstDDL.selectedIndex == 1) {
            if (SecondDDL.selectedIndex == 0 || ThirdDDL.selectedIndex == 0) {
                alert('Please select an option from Dropdown');
            }
        }
        return false;
    }
</script>

 


Posted on Mar 29, 2015 01:18 AM

 

How can I make it where if textbox length is not 0 then do not alert message and submit?  Would I use the || ?

 function Validate()
            {
                
                if (document.getElementById("<%=ddlFinalAction.ClientID%>").selectedIndex == "")
                {
                    alert('Must Enter Final Action Taken');
                    return false;
                }
                

                if (document.getElementById("<%=ddlFinalAction.ClientID%>").selectedIndex == "1" || document.getElementByID"<%TextBox5.ClientID%>". value > 0)
                {
                    alert('Must Enter Comment');
                    return false;
                    
                }

               
                
                return true;
           }//end validate()  

I am trying to make alert box not show up when value in TextBox5 is greater than 0 but alert box keeps showing up when value is  greater than 0.


Posted on Mar 29, 2015 01:26 AM Modified on on Mar 29, 2015 02:05 AM

Hi @compstuden

This is your new requirement. According to forum's rule, you can not ask more than one question in your single Thread.

First of all you should mark the reply (replies if multiple) as answer if it helped you, then  ask new question for your new requirement.

I agree, here is the link: https://www.e-iceblue.com/Introduce/spire-office-for-net-free.html