We help IT Professionals succeed at work.

What is the best way to display a calculated value in an html page?

bolenka asked
Hi All:
I have a bunch of fields that are calculated onblur and the total is kept track of and submitted to the database using a hidden input. The calculated value currently looks like this:
<tr><td><input id=1 value=100 onBlur=runrecalculate></input></td></tr>
<tr><td><input id=2 value=200 onBlur=runrecalculate></input></td></tr>
<tr><td><input id=3 value=300 onBlur=runrecalculate></input></td></tr>
<tr><td class="classtext"><input id=inputSum  value=number type=hidden/> 600</td></tr>

The inputSum needs to change the "text" of the td with the class classtext...but, I don't know how to access the text in the cell..Is it better to change the hidden input to a textbox, or to use a label...the problem is, the value isnot changing, I think each browser is handling this differently and I don't know why...would it be better to just use a textbox or a label, if so, please send code...HELP PLEASE:)
BTW, this is not my code...it was there already and I need to make it work...

Watch Question

Top Expert 2005
The problem is that <td class="classtext"> contains both your hidden field and the text value.

There are several cross-browser ways to change the number.

The simplest way would be to put it in a SPAN

<tr><td class="classtext"><input id=inputSum  value=number type=hidden/><span id="theNumber">600</span></td></tr>

Then in the function runrecalculate, after the line which updates the hidden field you would add: document.getElementById('theNumber').innerHTML = ****

Where **** is the newly calculated total.
Top Expert 2005

You could also change the hidden field to readonly or disabled and show the value there.  I'll have to test that to make sure your JavaScript calculator can modify the value.

Top Expert 2010

Is it the read only data or user will have an option to change the input values (100, 200, 300)?

please check the code for running total
	function runrecalculate()
		var content;
		content = Number(document.getElementById('a1').value) + Number(document.getElementById('a2').value) + Number(document.getElementById('a3').value);
		document.getElementById('inputSum').value = content;

<tr><td><input id=a1 value=100 onchange=runrecalculate()></input></td></tr>
<tr><td><input id=a2 value=200 onchange=runrecalculate()></input></td></tr>
<tr><td><input id=a3 value=300 onchange=runrecalculate()></input></td></tr>
<tr><td class="classtext"><input id=inputSum  value="600" type=text readonly/></td></tr>

Open in new window

Top Expert 2005

Already mentioned readonly om_prakash_p.

Yes you can change the value of readonly and disabled fields in the runrecalculate function, so you have at least three ways to choose from to show the value without the user changing it.



the user can change the values 100, 200 or 300 and when they tab off of them, the total automatically chages...the problem is there could be more than one calculated field on the page...so how do I even traverse the dom to change the total? thanks so much:)
you don't do it that way, you keep in a javascript variable the running total as each field is changed (I don't think onBlur is the right way to do this -- you should be using onChange to get valid results, because anyone can mouse over a field and mouse out, without changing anything).  SO here is what to do --

1.  Each field -- onChange -- adjust total in javascript variable for each field
2.  keep a running total in a javascript variable (or more if you need them) -- totalJSvalue
3.  Either show the running total in a span tag -- total is currently $ <SPAN id="total"> XXX </SPAN>
4.  The just use javascript to simply change that total each time it changes with in javascript --
     document.getElementById(total').innerHTML = totalJSvalue;
Top Expert 2005
Well if someone enters 200 in a field and realizes it should have been 125 you also need to keep track of what was entered the first time, so you can remove that from the running total when you add the corrected amount.

You could do that with JavaScript variables, however, you may want to keep the last entered value with the field itself, and this can be done with a custom attribute while still maintaining valid HTML. It seems to make sense to keep that value with the field itself.

http://www.rodsdot.com/html/Custom-Form-Attributes.asp discusses the pluses and minuses of using a custom attribute.

http://www.rodsdot.com/javascript/Show_Hidden_Value.asp has been changed such that a running total is maintained and displayed as text inside the <span>.

When a field is changed, not only is the value added to the total but that value is saved in the lastvalue custom attribute of the field.

If there was an existing lastvalue for the field, that value is decremented from the total before adding the new value.  This ensures the running total is always correct.