call javascript on dropdown selection change

call javascript on dropdown selection change

Page 1 of 1

6 Replies - 47936 Views - Last Post: 20 July 2010 - 12:21 AM Rate Topic: -----

#1 Sujit P  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 42
  • Joined: 23-February 10

call javascript on dropdown selection change

Posted 15 July 2010 - 05:02 AM

Hi,

Need to know how to call javascript function on Dropdown selectedindexchanged.
I will use code behind and get the thing working. However I still want to improve on my client side javascript skill. Here is the code that I have tried.

Please let me know your ideas on how to go about this. (When the user changes selection from the dropdown eventually I want to set style="display:block for either of the tables based on selection. Right now just showing an alert message in javascript function")

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="FirstForm.aspx.vb" Inherits="FirstForm" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
     
</head>
<body>
    <script type="text/javascript" >
    function func()
    {
        var selectedvalue=document.getElementById('<%#ddl1%>').Value
        alert(selectedvalue)
    }
    </script>
    <form id="form1" runat="server">
   
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <table width="650">
            <tr>
                <td align="center">
                <h2>Select the Task here</h2>
                </td>
            </tr>
            
            <tr>
                <td align="center">
                    <asp:UpdatePanel ID="up1" runat="server" UpdateMode="Always">
                        <ContentTemplate>
                            <asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true"
                            onselectedIndexChanged="func()" Width="150px">
                                <asp:ListItem Value="--Select--">--Select--</asp:ListItem>
                                <asp:ListItem Value="ImportFromXL">ImportFromXL</asp:ListItem>
                                <asp:ListItem Value="WriteToXL">WriteToXL</asp:ListItem>
                            </asp:DropDownList>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </td>
            </tr>
            
            <tr>
                <td>
                    <table id="tblImport" style="display:none" runat="server" >
                    </table>
                </td>
            </tr>
            
            <tr>
                <td>
                    <table id="tblExport" style="display:none" runat="server">
                    </table>
                </td>
            </tr>
        </table>  
    </form>
</body>
</html>



Is This A Good Question/Topic? 0
  • +

Replies To: call javascript on dropdown selection change

#2 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: call javascript on dropdown selection change

Posted 15 July 2010 - 07:38 AM

You don't necessarily need to use Javascript to modify the style of an HTML element. You can modify all the attributes of HTML elements that contain the runat="server" from the code-behind in the SelectedIndexChanged event of the DropDownList.

Here is an example of how to modify the style attributes.

tblImport.Style["display"] = "block";
tblExport.Style["display"] = "none";

Was This Post Helpful? 2
  • +
  • -

#3 Frinavale  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 203
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Re: call javascript on dropdown selection change

Posted 15 July 2010 - 08:43 AM

An Asp.NET DropDownList is rendered as an HTML <select> element.
This means that you have to look into handling the Javascript events for the onclick events for the <option> HTML elements within the <select> element that represents the DropDownList.

In your server side code, loop through the DropDownList's List Items and indicate that your Javascript method should be called during the list item's "onclick" event (ListItems in a DropDownList are rendered as the an HTML <option> element).

-Frinny

This post has been edited by Frinavale: 15 July 2010 - 08:43 AM

Was This Post Helpful? 2
  • +
  • -

#4 Sujit P  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 42
  • Joined: 23-February 10

Re: call javascript on dropdown selection change

Posted 15 July 2010 - 11:44 PM

View PostJayman, on 15 July 2010 - 07:08 PM, said:

You don't necessarily need to use Javascript to modify the style of an HTML element. You can modify all the attributes of HTML elements that contain the runat="server" from the code-behind in the SelectedIndexChanged event of the DropDownList.

Here is an example of how to modify the style attributes.

tblImport.Style["display"] = "block";
tblExport.Style["display"] = "none";


Dear Jayman,

I agree I made a mistake by setting the runat="server" for the html tables tblImport and tblExport. What if I remove the runat="server" attribute? I would like to do something like below:-
<asp:Dropdownlist.......... onselectedIndexChanged="func()"  />
<script type="text/javascript">
function func()
{
  var selectedvalue=document.getelementbyid('<%#ddl1%>').Value
   if selectedvalue='option1'
    {
      tblImport.Attributes.Add("style","display:block")// or setattribute method/corr equivalent in javascript
      tblExport.Attributes.Add("style","display:none")
    }
   else
    {
      tblImport.Attributes.Add("style","display:none")
      tblExport.Attributes.Add("style","display:block")
    }
}


Please let me know if this logic is OK and is there any error in syntax for document.getelementbyid that I used. The reason I am insisting on using 'Javascript' is to improve my working knowledge in using it.
Was This Post Helpful? 0
  • +
  • -

#5 Jayman  Icon User is offline

  • Student of Life
  • member icon

Reputation: 418
  • View blog
  • Posts: 9,532
  • Joined: 26-December 05

Re: call javascript on dropdown selection change

Posted 18 July 2010 - 09:06 AM

It isn't a mistake to use the runat tag on HTML controls. I was merely suggesting that since you had, you could access them from the code-behind.

There is only one thing wrong with the logic of you preceding Javascript function. Inline ASP script tags won't work in Javascript.

So this statement will never contain the object you need. As Javascript has not idea what <%#ddl1%> means.
var selectedvalue=document.getelementbyid('<%#ddl1%>').Value



So you are pretty much left with two options. Either look at the page source for the rendered page and find out what the DropDownList id is on the client side.
It will look similar to this, ctl00_MainContent_SubmitButton and then replace <%#ddl1%> with the actual ID of the control.

Or in the code-behind in the Page Load event you could add the javascript function to the page using the Page.RegisterClientScriptBlock. If this is an ajax enabled website then use the ClientScriptManager.RegisterClientScriptBlock. Then you can get the ClientId property from the DropDownList and provide it to the Javascript function. This method is the preferred method as there is no guarantee that the ID will always be the same when the page is rendered.
Was This Post Helpful? 3
  • +
  • -

#6 Frinavale  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 203
  • View blog
  • Posts: 776
  • Joined: 03-June 10

Re: call javascript on dropdown selection change

Posted 19 July 2010 - 06:11 AM

I never thought of using binding like this:<%#ddl1%>.
I don't think it will work.

Try using the ddl1's ClientID property instead...like this:
var selectedvalue=document.getelementbyid('<%=ddl1.ClientID%>').Value


The ClientID property gives you access to the unique ID that is given to the HTML element in your C#/VB.NET server-side code. (Remember that anything between <% %> is executed server side and that <%= %> is shorthand for <%Response.Write(...)%>)

-Frinny
Was This Post Helpful? 0
  • +
  • -

#7 Sujit P  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 42
  • Joined: 23-February 10

Re: call javascript on dropdown selection change

Posted 20 July 2010 - 12:21 AM

View PostJayman, on 18 July 2010 - 08:36 PM, said:

It isn't a mistake to use the runat tag on HTML controls. I was merely suggesting that since you had, you could access them from the code-behind.

There is only one thing wrong with the logic of you preceding Javascript function. Inline ASP script tags won't work in Javascript.

So this statement will never contain the object you need. As Javascript has not idea what <%#ddl1%> means.
var selectedvalue=document.getelementbyid('<%#ddl1%>').Value



So you are pretty much left with two options. Either look at the page source for the rendered page and find out what the DropDownList id is on the client side.
It will look similar to this, ctl00_MainContent_SubmitButton and then replace <%#ddl1%> with the actual ID of the control.

Or in the code-behind in the Page Load event you could add the javascript function to the page using the Page.RegisterClientScriptBlock. If this is an ajax enabled website then use the ClientScriptManager.RegisterClientScriptBlock. Then you can get the ClientId property from the DropDownList and provide it to the Javascript function. This method is the preferred method as there is no guarantee that the ID will always be the same when the page is rendered.


Dear Jayman,
Thank you for your valuable suggestion.
I think this is the same methods my Project Lead used in my previous company.
(Using the actual id at client-side from the page source).

I will try this and let you know.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1