Sum the total of 3 text fields and display total

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
bob_the _builder
Forum Contributor
Posts: 131
Joined: Sat Aug 28, 2004 12:25 am

Sum the total of 3 text fields and display total

Post 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
User avatar
Chris Corbyn
Breakbeat Nuttzer
Posts: 13098
Joined: Wed Mar 24, 2004 7:57 am
Location: Melbourne, Australia

Re: Sum the total of 3 text fields and display total

Post 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" />
bob_the _builder
Forum Contributor
Posts: 131
Joined: Sat Aug 28, 2004 12:25 am

Post by bob_the _builder »

feyd | Please use

Code: Select all

,

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

,

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]
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Call the calculation routine after the page loads (onload event).
bob_the _builder
Forum Contributor
Posts: 131
Joined: Sat Aug 28, 2004 12:25 am

Post 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
bob_the _builder
Forum Contributor
Posts: 131
Joined: Sat Aug 28, 2004 12:25 am

Post by bob_the _builder »

Hi,

I got it ..

Using: onkeyup

works like a charm


Thanks
Post Reply