EditForm Calculated Textbox

7 posts, 1 answers
  1. Dimitrios
    Dimitrios avatar
    45 posts
    Member since:
    Jun 2014

    Posted 18 Jul 2014 Link to this post


    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.

  2. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 20 Jul 2014 in reply to Dimitrios Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitrios
    Dimitrios avatar
    45 posts
    Member since:
    Jun 2014

    Posted 21 Jul 2014 in reply to Jayesh Goyani Link to this post

    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
  5. Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 21 Jul 2014 in reply to Dimitrios Link to this post

    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
  6. Dimitrios
    Dimitrios avatar
    45 posts
    Member since:
    Jun 2014

    Posted 22 Jul 2014 in reply to Jayesh Goyani Link to this post

    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;
  7. Answer
    Jayesh Goyani
    Jayesh Goyani avatar
    2732 posts
    Member since:
    May 2010

    Posted 22 Jul 2014 in reply to Dimitrios Link to this post

    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
  8. Dimitrios
    Dimitrios avatar
    45 posts
    Member since:
    Jun 2014

    Posted 22 Jul 2014 in reply to Jayesh Goyani Link to this post

    It,s ok now Jayesh.

    It works perfectly.

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

    Thanks for your time...
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017