UpdatePanel postback removes changes made using javascript

Question

I am using ASP.NET UpdatePanel for partial postback. Somehow after the server side postback (ddl_SelectedIndexChanged), the value set by a Javascript function (lblTotal's value of 100) gets removed. Is there anyway to preserve value set by the Javascript function?

JavaScript:

<script type="text/javascript">

    function calculateTotal() {
        var lblTotal = document.getElementById("<%= lblTotal.ClientID%>");
        lblTotal.innerHTML = "100";
    }
</script>

HTML:

<asp:UpdatePanel ID="UpdateGrid" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="ddl" runat="server" OnTextChanged="ddl_SelectedIndexChanged"             AutoPostBack="true"  />
        <asp:CheckBox ID="chkLevels" runat="server" onclick="calculateTotal()"  />
        <asp:Label ID="lblTotal" runat="server" />
     </ContentTemplate>
</asp:UpdatePanel>

C# / Code Behind:

protected void ddl_SelectedIndexChanged(object sender, EventArgs e)
{
   // Some code
}

Answer 1

The problem is here is that when you change data with calculateTotal in Javascript, server does not know about changes since you don't post back data to server.

So you need to trigger the postback event with __doPostBack():

Client side:

function calculateTotal() {
    var lblTotal = document.getElementById("<%= lblTotal.ClientID%>");
    //Calculation
    var totalValue = "100";

    __doPostBack('chkLevels', totalValue);
}

Page_Load on Server side :

protected void Page_Load(object sender, EventArgs e)
{

    if (Request["__EVENTTARGET"] == "chkLevels")
    {
        var totalValue = Request["__EVENTARGUMENT"];
        lblTotal.Text = totalValue;
    }

}

See: how to use __doPostBack function in asp.net