[RESOLVED] Calculate sum of textbox values

Hi, I have about 12 sets of textboxes wherein lets say (for set 1), txt1 is the quantity, txt2 is the rate and txt3 is the supposed to be the total amount (txt1 * txt2). I need to calculate the total for all the 12 sets and hence writing individual javascript formulas is way too tedious and way too lengthy also.

I have been searching the net for a typical javascript formual which will calculate the total amount on "onblur" event of quantity textbox (txt1). I understand i have to pass the parameters to the function and also the function should return the total amount as a return value to the 3rd parameter passed as an argument to the function. Trying directly gives different errors on runtime. Gathered that i will have to use the ClientID, in which case i would have to hardcode formulas and parameters for all 12 sets.

Is there any way i can pass 3 parameters to a javascript function, 2 of which will be calculating fields (txt1 and txt2) while the 3rd will the resultant field. The formula should be such that the onblur event should be able to put the total amount in the 3rd field for each set.

Hope i have expressed the problem in a proper manner and would deeply appreciate a fully functional formula to the above.


Using VWD 2010 and SQL Server as the database.

Any help will be appreciated. Thanks


Hi, yes it is possible to pass controls to javascript function. Following is the example. Please format it yourself as something is strange with my post:---------------- -------------<script language="javascript"> function calculate(ctrl1, ctrl2,ctrl3) { var c1 = document.getElementById(ctrl1); var c2 = document.getElementById(ctrl2); var c3 = document.getElementById(ctrl3); if (c1 != null && c2 != null) { c3.value = Number(c1.value) * Number(c2.value); } } </script> ----------------------------------------------------------------------------When you call this function, call it like ---------------------------------------------------------------------------------------<asp:TextBox ID="txt3" runat="server" onblur='javascript:calculate("txt1","txt2","txt3")'></asp:TextBox>

Thanks Adeel,

I tried the above snippet on IE 8. It did not generate any errors but also did not return any total. On putting alert boxes to debug, i saw that c1 and c2 are being returned as null and hence it is not able to calculate the total amount. If i put var c1 = document.getElementById(ctrl1).value i get an "object requried" message. please note txt2 already has a hardcoded text value. Yet it does not seem to work.

Also, is it ok, if i call the calculate function from the "onblur" of txt1, since txt3 might not and should not necessarily get the focus.

Thanks once again, I will try to tweak and see if i can manage.




Yeah u are right it should be on blur of txt2, I must have done it by mistake. But I checked the following code and it is working on my side:

function calculate(ctrl1, ctrl2,ctrl3) {
            var c1 = document.getElementById(ctrl1);
            var c2 = document.getElementById(ctrl2);
            var c3 = document.getElementById(ctrl3);
            if (c1 != null && c2 != null & c3!=null) {
                c3.value = Number(c1.value) * Number(c2.value);

And call it like:

<asp:TextBox ID="txt2" runat="server" onblur='javascript:calculate("txt1","txt2","txt3")'></asp:TextBox>
Make sure that you specify the ids of textboxes correctly and using double quotes in single quotes like above.

Sometimes the ClientID of a control (what the javascript can "see") differs from the ID you give it in ASP. Normally because you are using master pages or databound controls like gridviews or repeaters.

Try this in your Page_Load event:


txt2.Attributes["onblur"] = "javascript:calculate('" + txt1.ClientID + "','" + txt2.ClientID + "','" + txt3.ClientID + "');";


txt2.Attributes("onblur") = "javascript:calculate('" & txt1.ClientID & "','" & txt2.ClientID & "','" & txt3.ClientID & "');"

Thanks Guys, I was tweaking myself with the initial guidance from Adeel. It did not work with the initial code. However, i managed to get it working (atleast on IE8) with the following substitution:


<td class="AllTextBoxes" width="35px"> <asp:TextBox ID="txt1_Adult" runat="server" onkeypress="return isOnlyNumberKey(event)" onfocus="select();" onblur='calculate("ContentPlaceHolder1_txt1","ContentPlaceHolder1_txt2","ContentPlaceHolder1_txt3")' Width="35px" Style="text-align: center"></asp:TextBox> </td>

function calculate(ctrl1, ctrl2, ctrl3) { var c1 = document.getElementById(ctrl1).value; var c2 = document.getElementById(ctrl2).value; var c3 = document.getElementById(ctrl3).value; var totalAmount = (c1 * c2); document.getElementById(ctrl3).value = FormatValue(totalAmount); } function FormatValue(nStr) { nStr += ''; x = nStr.split('.'); x1 = x[0]; x2 = x.length > 1 ? '.' + x[1] : ''; var rgx = /(\d+)(\d{3})/; while (rgx.test(x1)) { x1 = x1.replace(rgx, '$1' + ',' + '$2'); } return x1 + x2; }
The FormatValue funciton ofcourse, formats the string to 9,999,999.99 format. I will try to apply the above to all sets as mentioned before and hope it works. Nonetheless many thanks to you guys! Tom

I looked over the page to see if i could find out how to post a code block, but could not find any command toolbar. Used Opera and IE 8. Did I miss something somewhere? Tom

thoughts on "[RESOLVED] Calculate sum of textbox values"

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>