EditForm Calculated Textbox

[Dimitrios]

On a custom edit form for a grid, I have two bound decimal fields.
I want to update a third calculated textbox when the user changes any of the two bound fields.

I followed Dimo's example from an old post called "ascx editform with calculation textboxes when onfocus or onblur", but I was never able to make it work.

Could someone take a look on the attached screen and give me an idea on how to do this? Thanks

--------------
Obviously, I am trying to update the "Total Cost" textbox, if the user changes the Quantity, or the Unit Cost textboxes, which are both bound to the database.

[Jayesh Goyani]

Hello,

Please try with the below code snippet.

<script type="text/javascript">
    function testFunction(obj, name) {
        var txt1 = $("#" + $(obj).attr("id").replace(name, 'TextBox1'));
        var txt2 = $("#" + $(obj).attr("id").replace(name, 'TextBox2'));
        var txt3 = $("#" + $(obj).attr("id").replace(name, 'TextBox3'));

        if (txt1.val() && txt2.val()) {
            txt3.val(parseInt(txt1.val()) * parseInt(txt2.val()));
        }
    }
</script>

<div id="myformtemplate">
    <asp:TextBox ID="TextBox1" runat="server" onchange="testFunction(this,'TextBox1');"></asp:TextBox>
    <asp:TextBox ID="TextBox2" runat="server" onchange="testFunction(this,'TextBox2');"></asp:TextBox>
    <asp:TextBox ID="TextBox3" runat="server" onchange="testFunction(this,'TextBox3');"></asp:TextBox>
</div>

Please add JS code into your web page.

Let me know if any concern.

Thanks,
Jayesh Goyani

[Dimitrios]

Hi Jayesh,

Thanks for your time...
I used your code as a guide, but I must be doing something wrong, since it does not work.

Please take a look on the following:

ascx file (remember, the calculation is to be done inside a user control, during a radgrid editing)
<script type="text/javascript">
    function EvalTotal(obj, name) {
      var txt1 = $("#" + $(obj).attr("id").replace(name, 'txtQty'));
      var txt2 = $("#" + $(obj).attr("id").replace(name, 'txtUnitCost'));
      var txt3 = $("#" + $(obj).attr("id").replace(name, 'txtTotalCost'));

      if (txt1.val() && txt2.val()) {
        txt3.val(parseFloat(txt1.val()) * parseFloat(txt2.val()));
      }
    }

  </script>

...
    <asp:TableCell>
      <asp:TextBox ID="txtQty" runat="server" Width="50px"
        Text='<%# IIf(DataBinder.Eval(Container, "DataItem.ODet_Initial_Qty") Is DBNull.Value, "0",
          DataBinder.Eval(Container, "DataItem.ODet_Initial_Qty", "{0:F3}"))%>'
        onchange="EvalTotal(this,'txtQty');">
      </asp:TextBox>
    </asp:TableCell>
    <asp:TableCell HorizontalAlign="Left">
        Unit Cost:
    </asp:TableCell>
    <asp:TableCell>
      <asp:TextBox ID="txtUnitCost" runat="server" Width="70px"
        Text='<%# IIf(DataBinder.Eval(Container, "DataItem.ODet_ItemUnitCost") Is DBNull.Value, "0",
          DataBinder.Eval(Container, "DataItem.ODet_ItemUnitCost", "{0:F3}"))%>'
        onchange="EvalTotal(this,'txtUnitCost');">
      </asp:TextBox>
    </asp:TableCell>
    <asp:TableCell HorizontalAlign="Left">
        Total Cost:
    </asp:TableCell>
    <asp:TableCell>
      <asp:TextBox ID="txtTotalCost" runat="server" Width="70px" ReadOnly="true"
        Text="" onchange="EvalTotal(this,'txtTotalCost');">
      </asp:TextBox>
    </asp:TableCell>

Changing the value of either of the two first textboxes does not update the value on the "result" textbox.

Now, I noticed that you call the function even from the "result" text box, which it might be a read only text box (as in my case).
Is this because the event is in respect to the whole user control change?

Also, my texboxes are bound to the database (if that makes any difference)

In any case, please take a look and let me know if you see any mistakes.

Again, thanks for your time

[Jayesh Goyani]

Hi,

Can you please add below script into page (not in user control) and check it one more time?

Let me know it will shows the alert message or not.

function EvalTotal(obj, name) {
    alert("EvalTotal() called");
    var txt1 = $("#" + $(obj).attr("id").replace(name, 'txtQty'));
    var txt2 = $("#" + $(obj).attr("id").replace(name, 'txtUnitCost'));
    var txt3 = $("#" + $(obj).attr("id").replace(name, 'txtTotalCost'));

    if (txt1.val() && txt2.val()) {
        txt3.val(parseFloat(txt1.val()) * parseFloat(txt2.val()));
    }
}

Thanks,
Jayesh Goyani

[Dimitrios]

Hello Jayesh,

Yes, the function is called.
I did put this on the aspx file, which contains the user control, as you said (interesting!)

But, I don't get a result on the txtTotalCost text box.

I also added an entry

alert(txt1.val());

...before the if statement, but I did not get a message, if this is of any help.

Any other ideas;

[Jayesh Goyani]

Hi,

function EvalTotal(obj, name) {

    var txt1 = $("#" + $(obj).attr("id").replace(name, 'txtQty'));
    var txt2 = $("#" + $(obj).attr("id").replace(name, 'txtUnitCost'));
    var txt3 = $("#" + $(obj).attr("id").replace(name, 'txtTotalCost'));

    alert(txt1);
    alert(txt2);
    alert(txt3);

    if (txt1.val() && txt2.val()) {
        txt3.val(parseFloat(txt1.val()) * parseFloat(txt2.val()));
    }
}

Can you please provide Alert value?

Thanks,
Jayesh Goyani

[Dimitrios]

It,s ok now Jayesh.

It works perfectly.

I just needed to re-install jquery through managing NuGet packages.

Thanks for your time...