javascript add two textbox values and display in third in asp.net

Question

How do I in javascript/asp add two textbox values and display in third?

My JS code

 function sum() {
      var txtFirstNumberValue = document.getElementById('TextBox1').value;
      var txtSecondNumberValue = document.getElementById('TextBox2').value;
      var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
      if (!isNaN(result)) {
          document.getElementById('TextBox3').value = result;
      }
  }

ASP in page load

TextBox1.Attributes.Add("onkeyup", "sum();");
TextBox2.Attributes.Add("onkeyup", "sum();");

Using ClientID like var txtFirstNumberValue = document.getElementById('<%= TextBox1.ClientID %>').value should work for ASPX webforms page (if you're not setting ClientIDMode="Static"). — Tetsuya Yamamoto
– Tetsuya Yamamoto, Commented Aug 15, 2017 at 9:34

Tetsuya Yamamoto · Accepted Answer · 2017-08-15 09:52:00Z

One thing you should know:

By default, ASP.NET uses auto-generated ClientID property to be used by TextBox control in ASPX pages, so that your textbox ID will become something like <input id="ctl00_ContentPlaceHolder1_TextBox1" type="text" ... /> after rendered. To use the server control name in client-side you need to use ClientID like this:

function sum() {
    var txtFirstNumberValue = document.getElementById('<%= TextBox1.ClientID %>').value;
    var txtSecondNumberValue = document.getElementById('<%= TextBox2.ClientID %>').value;
    var result = parseInt(txtFirstNumberValue) + parseInt(txtSecondNumberValue);
    if (!isNaN(result)) {
        document.getElementById('<%= TextBox3.ClientID %>').value = result;
    }
}

An alternative to avoid using generated ClientID in client-side is setting ClientIDMode to be static, here are examples to use it:

<%-- control level --%>
<asp:TextBox ID="TextBox1" runat="server" ClientIDMode="Static" ... />

<%-- placeholder level --%>
<asp:Content ID="Content1" runat="server" ClientIDMode="Static" ...>...</asp:Content>

<%-- page level --%>
<%@ Page Language="C#" ClientIDMode="Static" AutoEventWireup="true" ... %>

Reference:

ClientID Property

Set HTML Attributes for Controls in ASP.NET Web Pages

Ali Soltani · Accepted Answer · 2017-08-15 10:12:11Z

You can use below code in aspx without using code behind.

<asp:textbox id="TextBox1" cssclass="sum" runat="server" />
<asp:textbox id="TextBox2" cssclass="sum" runat="server" />
<asp:textbox id="txtResult" runat="server" />

<script>
    $(document).ready(function () {
        //this calculates values automatically 
        calculateSum();

        $(".sum").on("keydown keyup", function () {
            calculateSum();
        });
    });

    function calculateSum() {
        var sum = 0;
        //iterate through each textboxes and add the values
        $(".sum").each(function () {
            //add only if the value is number
            if (!isNaN(this.value) && this.value.length != 0) {
                sum += parseFloat(this.value);
                $(this).css("background-color", "#FEFFB0");
            }
            else if (this.value.length != 0) {
                $(this).css("background-color", "red");
            }
        });

        $("#<%=this.txtResult.ClientID%>").val(sum.toFixed(2));
    }
</script>

Collectives™ on Stack Overflow

javascript add two textbox values and display in third in asp.net

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related