CODEWITHSUNDEEP
javascriptc#jqueryasp.net
JB11
JB11

Reputation: 53

how to subtract asp textbox values and put result in asp label

I am trying to get the values from two text boxes, subtract the values and return the difference in an a label as the values are typed in. I have tried the below code and am having no luck. What is the best way to do this? This is running on asp.net page with a master page.

.ASPX

  <asp:TextBox ID="txtWeek1FridayAM_IN" runat="server" class="numeric" Width="40px" >0.00</asp:TextBox>
  <asp:Label ID="lblWeek1FridayTotalHrs" runat="server" class="numeric" Text="0"></asp:Label>                  
  <asp:TextBox runat="server" ID="txtWeek1FridayAM_OUT" class="numeric" width="40px"  OnTextChanged="OUTvalidation" >0.00</asp:TextBox>

aspx.cs

     $(document).ready(function () {
        sum();
        $("#txtWeek1FridayAM_IN, #txtWeek1FridayAM_OUT").on("keydown keyup", function () {
            sum();
        });
    });

    function sum() {
        var num1 = document.getElementById('#txtWeek1FridayAM_IN').value;
        var num2 = document.getElementById('#txtWeek1FridayAM_OUT').value;
        var result = parseFloat(num2) - parseFloat(num1);

        if (!isNaN(result)) {
            document.getElementById('#lblWeek1FridayTotalHrs').value = result;

        }

    }

Upvotes: 0

Views: 1326

Answers (5)

Mamun
Mamun

Reputation: 68933

Few points:

  1. If you need to reference the control IDs in client-side script, you can use <%= control_id.ClientID %>.

  2. label or span element does not have value property, use textContent instead.

  3. I prefer input instead of keyup and keydown.

  4. I am having some issue with OnTextChanged="OUTvalidation" while running the code. But able to execute successfully by removing that from the control.

Change you code to the following:

$(document).ready(function () {
    sum();
    $("body").on("input", "#<%=txtWeek1FridayAM_IN.ClientID%>, #<%=txtWeek1FridayAM_OUT.ClientID%>", function () {
       sum();
    });
});

function sum() {
    var num1 = document.getElementById('<%=txtWeek1FridayAM_IN.ClientID%>').value;
    var num2 = document.getElementById('<%=txtWeek1FridayAM_OUT.ClientID%>').value;
    var result = parseFloat(num2) - parseFloat(num1);

    if (!isNaN(result)) {
        document.getElementById('<%=lblWeek1FridayTotalHrs.ClientID%>').textContent = result;
    }
}

Upvotes: 1

Shreyas Pednekar
Shreyas Pednekar

Reputation: 1305

Try this, this will work .aspx page

<asp:TextBox ID="txtWeek1FridayAM_IN" runat="server" class="numeric" Width="40px" >0.00</asp:TextBox>
<asp:Label ID="lblWeek1FridayTotalHrs" runat="server" class="numeric" Text="0"></asp:Label>                  
<asp:TextBox runat="server" ID="txtWeek1FridayAM_OUT" class="numeric" width="40px"  OnTextChanged="OUTvalidation" >0.00</asp:TextBox>

.cs page

protected void OUTvalidation(object sender, EventArgs e)
{
    int val1 = Convert.ToInt32(txtWeek1FridayAM_IN.Text);
    int val2 = Convert.ToInt32(txtWeek1FridayAM_OUT.Text);
    int val3 = val1 - val2;
    lblWeek1FridayTotalHrs.Text = val3.ToString();
}

If you enter values in both the textboxes and click enter on the second textbox it will display value on the label.

Upvotes: 0

sujith karivelil
sujith karivelil

Reputation: 29006

Have you tried this with onkeypress="SUM()":

ASP :

<asp:TextBox ID="txtWeek1FridayAM_IN" onkeypress="SUM()" runat="server" class="numeric" Width="40px" >0.00</asp:TextBox>
<asp:Label ID="lblWeek1FridayTotalHrs" runat="server" class="numeric" Text="0"></asp:Label>                  
<asp:TextBox runat="server" ID="txtWeek1FridayAM_OUT" onkeypress="SUM();" class="numeric" width="40px"  OnTextChanged="OUTvalidation" >0.00</asp:TextBox>

Script:

function SUM() {
      var num1 = $('input[id=<%=txtWeek1FridayAM_IN.ClientID%>]').val();
      var num2 = $('input[id=<%=txtWeek1FridayAM_OUT.ClientID%>]').val();
      var result = parseFloat(num2) - parseFloat(num1);
      if (!isNaN(result)) {
         document.getElementById('<%=lblWeek1FridayTotalHrs.ClientID %>').value = result;
      }
}

Please note :

  • You can specify the javascript method at the time of defining the controls, no need to depend on document.ready for this. like what we did onkeypress="SUM()"
  • Since you are using ASP controls the ID of the control may not be the same as you defined. master page may also have a role in this. so better to use ClientID

Upvotes: 0

Vindhyachal Kumar
Vindhyachal Kumar

Reputation: 1794

Use this script

$(document).ready(function () {
    sum();
    $('[id$="txtWeek1FridayAM_IN"], [id$="txtWeek1FridayAM_OUT"]').on("keyup", function () {
        sum();
    });
});

function sum() {
    var num1 = $('[id$="txtWeek1FridayAM_IN"]').val();
    var num2 = $('[id$="txtWeek1FridayAM_OUT"]').val();
    var result = parseFloat(num2) - parseFloat(num1);

    if (!isNaN(result)) {
        $('[id$="lblWeek1FridayTotalHrs"]').html(result);

    }

}

Upvotes: 0

Mandar Dhadve
Mandar Dhadve

Reputation: 381

you can put onkeyup in textbox control

 <asp:TextBox runat="server" ID="txtWeek1FridayAM_OUT" class="numeric" width="40px"  OnTextChanged="OUTvalidation" onkeyup="sum(); return false" >0.00</asp:TextBox>

Upvotes: 0

Related Questions