Textbox lose value after postback

Question

I have a group of text box that allows the user to automatically compute the gross amount. The computation is working but when the page post back all the text box value is gone. Any help would be much appreciated! Thank you!

Please see below my codes.

JavaScript

$(document).ready(function () {
            Number.prototype.formatMoney = function (c, d, t) {
                var n = this,
                c = isNaN(c = Math.abs(c)) ? 2 : c,
                d = d == undefined ? "." : d,
                t = t == undefined ? "," : t,
                s = n < 0 ? "-" : "",
                i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))),
                j = (j = i.length) > 3 ? j % 3 : 0;
                return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : "");
            };

        });

        $(document).ready(function () {
            $(this).keyup(function () {

                $("input[name='txtbx_less']").each(function (index) {
                    var txtbx_gross = $("input[name='ctl00$MainContent$txtbx_gross']").eq(index).val().replace(/,/g, "");
                    var txtbx_less = parseFloat(txtbx_gross) * 0.15;

                    if (!isNaN(txtbx_less)) {
                        $("input[name='ctl00$MainContent$txtbx_less']").eq(index).val(txtbx_less.formatMoney());
                    }

                });

                $("input[name='txtbx_net']").each(function (index) {
                    var txtbx_gross = $("input[name='txtbx_ctl00$MainContent$txtbx_grossgross']").eq(index).val().replace(/,/g, "");
                    var txtbx_less = $("input[name='ctl00$MainContent$txtbx_less']").eq(index).val().replace(/,/g, "");
                    var txtbx_net = parseFloat(txtbx_gross) - parseFloat(txtbx_less);

                    if (!isNaN(txtbx_net)) {
                        $("input[name='ctl00$MainContent$txtbx_net']").eq(index).val(txtbx_net.formatMoney());
                    }

                });

                $("input[name='ctl00$MainContent$txtbx_add']").each(function (index) {
                    var txtbx_net = $("input[name='ctl00$MainContent$txtbx_net']").eq(index).val().replace(/,/g, "");
                    var txtbx_add = parseFloat(txtbx_net) * 0.12;


                    if (!isNaN(txtbx_add)) {
                        $("input[name='ctl00$MainContent$txtbx_add']").eq(index).val(txtbx_add.formatMoney());

                    }

                });

                $("input[name='txtbx_billed']").each(function (index) {
                    var txtbx_net = $("input[name='txtbx_net']").eq(index).val().replace(/,/g, "");
                    var txtbx_add = $("input[name='txtbx_add']").eq(index).val().replace(/,/g, "");
                    var txtbx_billed = parseFloat(txtbx_net) + parseFloat(txtbx_add);

                    if (!isNaN(txtbx_billed)) {
                        $("input[name='txtbx_billed']").eq(index).val(txtbx_billed.toFixed(2));
                    }
                });


                $("input[name='txtbx_add1']").each(function (index) {
                    var txtbx_net1 = $("input[name='txtbx_net1']").eq(index).val().replace(/,/g, "");
                    var txtbx_add1 = parseFloat(txtbx_net1) * 0.12;


                    if (!isNaN(txtbx_add1)) {
                        $("input[name='txtbx_add1']").eq(index).val(txtbx_add1.formatMoney());
                    }

                });

                $("input[name='txtbx_billed1']").each(function (index) {
                    var txtbx_net1 = $("input[name='txtbx_net1']").eq(index).val().replace(/,/g, "");
                    var txtbx_add1 = $("input[name='txtbx_add1']").eq(index).val().replace(/,/g, "");
                    var txtbx_billed1 = parseFloat(txtbx_net1) + parseFloat(txtbx_add1);

                    if (!isNaN(txtbx_billed1)) {
                        $("input[name='txtbx_billed1']").eq(index).val(txtbx_billed1.formatMoney());
                    }
                });



            });


        }); 

Front-end

    <table class = "billcomp">
        <tr>
        <td class = "prebiltd">GROSS AMOUNT :</td>
        <td class = "prebiltd">
        <dx:ASPxTextBox ID="txtbx_gross" runat="server" Width="170px" Theme="Material">
        <MaskSettings Mask="<0..99999999g>.<00..99>" AllowMouseWheel="false"/>
        </dx:ASPxTextBox>
        </td>
       </tr>

       <tr>
       <td class = "prebiltd">LESS: 15% ASF :</td>
       <td class = "prebiltd">
       <dx:ASPxTextBox ID="txtbx_less" runat="server" Width="170px" Theme="Material">
       <MaskSettings Mask="<0..99999g>.<00..99>" AllowMouseWheel="false"/>
       </dx:ASPxTextBox>
       </td>
       </tr>

       <tr>
       <td class = "prebiltd">NET AMOUNT :</td>
       <td class = "prebiltd">
       <dx:ASPxTextBox ID="txtbx_net" runat="server" Width="170px" Theme="Material">
       <MaskSettings Mask="<0..99999g>.<00..99>" AllowMouseWheel="false"/>
       </dx:ASPxTextBox>
       </td>
       </tr>

       <tr>
       <td></td>
       <td>
       <asp:CheckBox ID="chckbox_nonvat" runat="server" Text="NON-VAT"></asp:CheckBox>
       </td>
       </tr>

   <tr>
   <td class = "prebiltd">ADD 12% VAT :</td>
   <td class = "prebiltd">
   <dx:ASPxTextBox ID="txtbx_add" runat="server" Width="170px" Theme="Material" ClientInstanceName="txtbx_add">
   <MaskSettings Mask="<0..99999g>.<00..99>" AllowMouseWheel="false"/>
   </dx:ASPxTextBox>
   </td>
   </tr>

   <tr>
   <td class = "prebiltd">BILLED AMOUNT :</td>
   <td class = "prebiltd">
   <dx:ASPxTextBox ID="txtbx_billed" runat="server" Width="170px" Theme="Material">
   <MaskSettings Mask="<0..99999g>.<00..99>" AllowMouseWheel="false"/>
   </dx:ASPxTextBox>
   </td>
   </tr>

   </table>

Back end codes

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
 txtbx_gross.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_gross';   }"
        txtbx_less.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_less';   }"
        txtbx_net.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_net';   }"
        txtbx_add.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_add';   }"
        txtbx_billed.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_billed';   }"

        txtbx_net1.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_net1';   }"
        txtbx_add1.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_add1';   }"
        txtbx_billed1.ClientSideEvents.Init = "function(s,e){   s.GetInputElement().name='txtbx_billed1';   }"
End Sub

Answer 1

Sorry, I cant comment so only I replied via answer. What said by Niranjan Kala is correct only.

In devexpress controls, we cant get/set the text box or any input control values from client side using the ID. So only DevExpress providing property called "ClientInstanceName". Using that we can set/get the values of input controls from client side.

Try like following,

<dx:ASPxButton ...>
<ClientSideEvents Click="function(s, e) {
    alert(txtbx_gross.GetValue());
}" />

<dx:ASPxTextBox ID="txtbx_gross" ClientInstanceName="txtbx_gross" runat="server"/>

Updated Answer:

Cause: It seems, If you change the value of server control through javascript in the client side it will not be propagated via postback in the serverside. and also It will be cleared if postback occurs.

Solution: To resolve this postback problem, DevExpress has the technique called callback/ASPxCallbackPanel (like asp update panel).

So you should avoid the postback and use the callback techniques to implement your functionality . Try the following techniques,

Solution 1: OnCallBack event on ComboBox Control

JS

function SelectedIndexChanged(s, e) {           
        var selectedVal = FilterCombo.GetText();
        var gross = txtbx_gross.GetValue();
        var less = txtbx_less.GetValue();

        var str = gross + ":" + less + ":" + selectedVal;

        FilterCombo.PerformCallback(str);
    }

We can pass required parameters by concatenation with separator.

.ASPx

<dx:ASPxComboBox runat="server" ID="FilterCombo" ClientInstanceName="FilterCombo" Width="70px" DropDownWidth="70px" ValueType="System.Int32"
                            OnCallback="FilterCombo_Callback"  DropDownStyle="DropDownList" SelectedIndex="0">
                            <Items>
                                <dx:ListEditItem Value="3" />
                                <dx:ListEditItem Value="20" />
                                <dx:ListEditItem Value="25" />
                                <dx:ListEditItem Value="50" />
                            </Items>
                            <ClientSideEvents SelectedIndexChanged="SelectedIndexChanged" />
                        </dx:ASPxComboBox>

Code behind: : I'm not experienced with VB.Net. So i derived in asp.net with c#

protected void FilterCombo_Callback(object sender, CallbackEventArgsBase e)
    {
        string[] paramlist = e.Parameter.Split(':');
        if (paramlist.Length > 0)
        {
            decimal gross = Convert.ToDecimal(paramlist[0].ToString());
            decimal less = Convert.ToDecimal(paramlist[1].ToString());
            string dropdown = paramlist[2].ToString();

            //Do your logic here
        }
    }

Solution 2: Use the ASPxCallBackPanel control

Same like above with some differences, Include the controls in the callback panel and do the callback instead of postback. Refer the following links,

1. Callback Panel
2. The Concept of Callbacks

Solution 3: Still you have stuck with problem means, Just create the sample application with your problem and post it with question in Devexpress Forum if you have the licensed account.

Thanks

Answer 2

As mentioned in your previous question, the ClientInstanceName attribute should be used for DevExpress controls' client-side events.

However, regarding the control ID naming which shown as ctl00$[placeholder_name]$[control_name], this is explanation I got from Microsoft Docs:

As we discussed, the ctl00 portion of the rendered id attribute constitutes the ID value of the master page, but you may be wondering how this ID value came about. We did not specify it anywhere in our master or content page. Most server controls in an ASP.NET page are added explicitly through the page's declarative markup.

Other controls, like the master page itself, are not defined in the declarative markup. Consequently, their ID values must be automatically generated for us. The ASP.NET engine sets the ID values at runtime for those controls whose IDs have not been explicitly set. It uses the naming pattern ctlXX, where XX is a sequentially increasing integer value.

Hence, since you're using asp:Content placeholder with master page as naming container, the controls inside it have their id attribute altered, even it is a DevExpress control.

To prevent this behavior, you need to define ClientIDMode="Static" as Niranjan Kala mentioned in his post, but this time used for master page level:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" 
    ClientIDMode="Static" %>

Also set the same parameter in web.config:

<system.web>
    ...
    <pages clientIDMode="Static"></pages>
    ...
</system.web>

Additionally, regarding textbox values which lost after postback issue, I found that you're using MaskSettings with a decimal point, but not specifying IncludeLiterals:

<%-- missing IncludeLiterals in MaskSettings --%>
<dx:ASPxTextBox ID="txtbx_add" runat="server" Width="170px" Theme="Material" ClientInstanceName="txtbx_add">
   <MaskSettings Mask="<0..99999g>.<00..99>" AllowMouseWheel="false"/>
</dx:ASPxTextBox>

The correct usage is shown below:

<dx:ASPxTextBox ID="txtbx_add" runat="server" Width="170px" Theme="Material" ClientInstanceName="txtbx_add">
   <MaskSettings Mask="<0..99999g>.<00..99>" IncludeLiterals="DecimalSymbol" AllowMouseWheel="false" />
</dx:ASPxTextBox>  

NB: You can use IncludeLiterals="None" if DecimalSymbol doesn't work.

Reference:

ASPxTextBox does not persist its value on a postback if MaskSettings.Mask contains a dot

Answer 3

You don't need to set control name/id property on Page_Load event. You can use the ClientInstanceName property. see below example:

<dx:ASPxButton ...>
    <ClientSideEvents Click="function(s, e) {
        alert(txtDevExpress.GetText());
    }" />
</dx:ASPxButton>
<dx:ASPxTextBox ClientInstanceName="txtDevExpress">
</dx:ASPxTextBox>

Refer these:
ASPxTextBox - getElementById vs ClientInstanceName
How to use ASPxTextBox client-side API / ClientIDMode="Static"
How to use the ClientInstanceName and Name properties when they contain special characters