Call JavaScript function on DropDownList SelectedIndexChanged Event:

Question

I have written one JavaScript function as follows:

 function CalcTotalAmt() 
 {
    ----------
    -----------
 }

I have one DropDownList,

  <asp:DropDownList ID="ddl" runat="server"  AutoPostBack="true" OnSelectedIndexChanged="ddl_SelectedIndexChanged"></asp:DropDownList>

I need to call the above JavaScript function in the DropDownList's SelectedIndexChanged Event. I tried like below;

protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{
    ddl.Attributes.Add("onchange", "return CalcTotalAmt();");
}

But the JavaScript function is not executing. How to call the JavaScript function in DropDownList Change Event?

I realize this is an old question, but are you sure you even want to cause a postback here? If all your server side code is doing is calling the client side code, then why not just leave the server out of it and run it directly on the client side? — Tony L.
– Tony L., Commented Aug 24, 2016 at 17:30

Imran Balouch · Accepted Answer · 2012-06-02 11:39:22Z

18

Or you can do it like as well:

<asp:DropDownList ID="ddl" runat="server"  AutoPostBack="true" onchange="javascript:CalcTotalAmt();" OnSelectedIndexChanged="ddl_SelectedIndexChanged"></asp:DropDownList>

answered Jun 2, 2012 at 11:39

Imran Balouch

2,1701 gold badge18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Imran Balouch Over a year ago

and if you want to fire that event during server side change event of drop down, than try by registering your script through Page.RegisterStartUpScript method.

Kapil Khandelwal · Accepted Answer · 2012-06-02 14:21:12Z

13

First Method: (Tested)

Code in .aspx.cs:

 protected void Page_Load(object sender, EventArgs e)
    {
        ddl.SelectedIndexChanged += new EventHandler(ddl_SelectedIndexChanged);
        if (!Page.IsPostBack)
        {
            ddl.Attributes.Add("onchange", "CalcTotalAmt();");
        }
    }

    protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
    {
       //Your Code
    }

JavaScript function: return true from your JS function

   function CalcTotalAmt() 
 {
//Your Code
 }

.aspx code:

<asp:DropDownList ID="ddl" runat="server"  AutoPostBack="true">
        <asp:ListItem Text="a" Value="a"></asp:ListItem>
         <asp:ListItem Text="b" Value="b"></asp:ListItem>
        </asp:DropDownList>

Second Method: (Tested)

Code in .aspx.cs:

protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.Params["__EVENTARGUMENT"] != null && Request.Params["__EVENTARGUMENT"].Equals("ddlchange"))
                ddl_SelectedIndexChanged(sender, e);
            if (!Page.IsPostBack)
            {
                ddl.Attributes.Add("onchange", "CalcTotalAmt();");
            }
        }

        protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
        {
            //Your Code
        }

JavaScript function: return true from your JS function

function CalcTotalAmt() {
         //Your Code
     __doPostBack("ctl00$MainContent$ddl","ddlchange");
 }

.aspx code:

<asp:DropDownList ID="ddl" runat="server"  AutoPostBack="true">
        <asp:ListItem Text="a" Value="a"></asp:ListItem>
         <asp:ListItem Text="b" Value="b"></asp:ListItem>
        </asp:DropDownList>

edited Jun 2, 2012 at 14:21

answered Jun 2, 2012 at 11:24

Kapil Khandelwal

16.2k3 gold badges49 silver badges55 bronze badges

2 Comments

thevan Over a year ago

the Javascript function is executing.. But i have written some coding in selectedindexchanged event. But that event is not firing.. how to solve this problem?

thevan Over a year ago

But when I click some event, then at first the selectedIndexChanged event is firing and then the corresponding event is firing. I dont know why it is happening like this?

Cyberpks · Accepted Answer · 2012-09-11 05:13:00Z

1

You can use the ScriptManager.RegisterStartupScript(); to call any of your javascript event/Client Event from the server. For example, to display a message using javascript's alert();, you can do this:

protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{
Response.write("<script>alert('This is my message');</script>");
 //----or alternatively and to be more proper
 ScriptManager.RegisterStartupScript(this, this.GetType(), "callJSFunction", "alert('This is my message')", true);
}

To be exact for you, do this...

protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{
 ScriptManager.RegisterStartupScript(this, this.GetType(), "callJSFunction", "CalcTotalAmt();", true);
}

answered Sep 11, 2012 at 5:13

Cyberpks

1,4216 gold badges21 silver badges56 bronze badges

Collectives™ on Stack Overflow

Call JavaScript function on DropDownList SelectedIndexChanged Event:

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related