How to open Pop up window on Drop down selection in Asp.net

Introduction: In previous article i explained how to How to fill DropDownList from Sql server database in asp.net and how to  Fill CheckBoxList based on DropDownList selection in asp.net(C#, VB) and  How to fill dropdownlist with days, month and year in asp.net(C#, VB).Now in this article I am going to explain how to open new Page/Website in Pop up based on the DropDownList selection. Suppose you want to open new page or any website on Pop Up whenever you select any item from the DropDownList control then here is the solution using JavaScript.

C#.NET Code 
  • In <HEAD> tag of your design page (.aspx) create a JavaScript function to open pop up window as: 
<head runat="server">
    <title>PopUp window on Dropdown selection</title>
    <script language="javascript" type="text/javascript">
        function openpopup() {
            var a = document.getElementById('<%= ddlItems.ClientID %>').selectedIndex;          
            var b = document.getElementById('<%= ddlItems.ClientID %>').options[a].value;         
            if (b == "-1") {
                alert('Please Select item');
            }
            else {
                window.open("http://www.webcodeexpert.com/", "List", "scrollbars=yes,resizable=no,width=640,height=400");
            }
        }
</script>
</head> 
  • In the <BODY> Tag place a DropDownList Control as: 
<asp:DropDownList ID="ddlItems" runat="server" AutoPostBack="True"
            onselectedindexchanged="ddlItems_SelectedIndexChanged">
         <asp:ListItem Selected="True" Value="-1">--Select Item--</asp:ListItem>
            <asp:ListItem>Item 1</asp:ListItem>
            <asp:ListItem>Item 2</asp:ListItem>
            <asp:ListItem>Item 3</asp:ListItem>
            <asp:ListItem>Item 4</asp:ListItem>          
        </asp:DropDownList>

  • Now in the code behind file (.aspx.cs) write the code on  SelectedIndexChanged event of DropDownList as:
  protected void ddlItems_SelectedIndexChanged(object sender, EventArgs e)
    {
        if (!ClientScript.IsStartupScriptRegistered("alert"))
        {
            Page.ClientScript.RegisterStartupScript(this.GetType(),
                "alert", "openpopup();", true);
        }          
    } 

VB.NET Code
  • In <HEAD> tag of your design page (.aspx) create a JavaScript function to open pop up window as: 
<head id="Head1" runat="server">
    <title>PopUp on Dropdown selection</title>
    <script language="javascript" type="text/javascript">
        function openpopup() {
            var a = document.getElementById('<%= ddlItems.ClientID %>').selectedIndex; 
            var b = document.getElementById('<%= ddlItems.ClientID %>').options[a].value; 
            if (b == "-1") {
                alert('Please Select item');
            }
            else {
                window.open("http://www.webcodeexpert.com/", "List", "scrollbars=yes,resizable=no,width=640,height=400");
            }
        }
</script>
</head> 
  • In the <BODY> Tag place a DropDownList Control as:
 <asp:DropDownList ID="ddlItems" runat="server" AutoPostBack="True">
         <asp:ListItem Selected="True" Value="-1">--Select Item--</asp:ListItem>
            <asp:ListItem>Item 1</asp:ListItem>
            <asp:ListItem>Item 2</asp:ListItem>
            <asp:ListItem>Item 3</asp:ListItem>
            <asp:ListItem>Item 4</asp:ListItem>          
        </asp:DropDownList> 
  • Now in the code behind file (.aspx.vb) write the code on  SelectedIndexChanged event of DropDownList as:
Protected Sub ddlItems_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlItems.SelectedIndexChanged
        If Not ClientScript.IsStartupScriptRegistered("alert") Then
            Page.ClientScript.RegisterStartupScript(Me.[GetType](), "alert", "openpopup();", True)
        End If
    End Sub

Previous
Next Post »

2 comments

Click here for comments
Unknown
admin
January 18, 2014 ×

I have known that how to open pop up window on Drop down selection in Asp.net. It was very essential to me. Keep it up.
exit intent technology

Reply
avatar
January 19, 2014 ×

hi wendyx wendy baker, thanks for appreciating this article..stay connected and keep reading..:)

Reply
avatar

If you have any question about any post, Feel free to ask.You can simply drop a comment below post or contact via Contact Us form. Your feedback and suggestions will be highly appreciated. Also try to leave comments from your account not from the anonymous account so that i can respond to you easily..