Page 1 of 1
Sum the total of 3 text fields and display total
Posted: Mon Apr 23, 2007 10:41 pm
by bob_the _builder
Hi,
Is it posible to have 3 text fields, as a value is typed into each field, have a read-only field generate the total sum of the 3 text fields without reloading the form?
If so where would I start?
Thanks
Re: Sum the total of 3 text fields and display total
Posted: Tue Apr 24, 2007 1:46 am
by Chris Corbyn
bob_the _builder wrote:Hi,
Is it posible to have 3 text fields, as a value is typed into each field, have a read-only field generate the total sum of the 3 text fields without reloading the form?
If so where would I start?
Thanks
Yes it is.
Code: Select all
var inputs = new Array("i1", "i2", "i3");
var totalBox = "tot";
function updateTotal()
{
var total = 0;
var currentElement;
for (var i = 0; i < inputs.length; i++)
{
currentElement = document.getElementById(inputs[i]);
total += parseInt(currentElement.value); //You may need parseFloat instead
}
var updateElement = document.getElementById(totalBox);
updateElement.value = total;
}
Code: Select all
<input name="i1" id="i1" type="text" onkeyup="updateTotal();" />
<input name="i2" id="i2" type="text" onkeyup="updateTotal();" />
<input name="i3" id="i3" type="text" onkeyup="updateTotal();" />
<input name="tot" id="tot" disabled="disabled" type="text" value="0" />
Posted: Tue Apr 24, 2007 2:46 am
by bob_the _builder
feyd | Please use Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Hi,
I did come up with:
[syntax="javascript"]function roundTo(num,pow){
if(isNaN(num))
{
num = 0;
}
num *= Math.pow(10,pow);
num = (Math.round(num)/Math.pow(10,pow))+ "" ;
if(num.indexOf(".") == -1)
num += "." ;
while(num.length - num.indexOf(".") - 1 < pow)
num += "0" ;
return num;
}
function addTotals() {
with (document.forms["application_form"])
{
var totalResult = Number( exp1.value ) + Number( exp2.value ) + Number( exp3.value ) + Number( exp4.value ) + Number( exp5.value );
exp6.value = roundTo( totalResult, 2 );
var totalResult = Number( in1.value ) + Number( in2.value );
in3.value = roundTo( totalResult, 2 );
var totalResult = Number( lia1.value ) + Number( lia2.value ) + Number( lia3.value ) + Number( lia4.value ) + Number( lia5.value );
lia6.value = roundTo( totalResult, 2 );
var totalResult = Number( asset1.value ) + Number( asset2.value ) + Number( asset3.value ) + Number( asset4.value ) + Number( asset5.value ) + Number( asset6.value );
asset7.value = roundTo( totalResult, 2 );
}
}
Problem is that if the form is submited with manditory fields uncompleted the from reloads, and u must click in atleast one field from each block above to make the total apear again ..
Is there away around that?
Thanks
feyd | Please use[/syntax]Code: Select all
and [syntax="..."] tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: [url=http://forums.devnetwork.net/viewtopic.php?t=21171]Posting Code in the Forums[/url] to learn how to do it too.[/color]
Posted: Tue Apr 24, 2007 3:26 am
by CoderGoblin
Call the calculation routine after the page loads (onload event).
Posted: Tue Apr 24, 2007 5:53 pm
by bob_the _builder
Hi,
Im not sure that will work. As im wanting it calculate it in real time not after page loads.
Its only an issue if the form is submited without all the $ fields filled in.
Thanks
Posted: Tue Apr 24, 2007 6:05 pm
by bob_the _builder
Hi,
I got it ..
Using: onkeyup
works like a charm
Thanks