Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Calculating adding numbers in text fields using javascript

Posted on 2009-04-10
8
Medium Priority
?
617 Views
Last Modified: 2012-05-06
I have a form with textfields that each gets populated with a number if/when a person makes a selection from various list menus.  I would like to create a grand total field that calculates the textfields.  Right now, textfields are originally defaulted to 0.00

What I want to accomplish:
1. Total field will add/calculate total selected textfields
2. Total field is originally defaulted to 0.00
3. Total field automatically updates after a textfield has a value selected/entered

Below is code I am trying to work with but encountering issues with.
<script type="text/javascript">
function func1()
{
document.form.answerfield1 = eval(document.form.textfield1 + document.form.textfield2 + document.form.textfield3)
}
</script>
<p>
  <input type="text" name="textField1">
  <input type="text" name="textField2">
  <input type="text" name="textField3" onChange="JavaScript:func1();">
</p>
<p>Total 
  <input type="text" name="answerfield1">
</p>

Open in new window

0
Comment
Question by:arendt73
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 2
8 Comments
 
LVL 41

Expert Comment

by:HonorGod
ID: 24116582
Something like this perhaps?
<html>
<body>
 
<form name='myform' action=''>
  1: <input type="text" id="textField1"><br>
  2: <input type="text" id="textField2"><br>
  3: <input type="text" id="textField3" onChange="func1()"><br>
Total 
  <input type="text" id="answerField1">
</form>
 
 
<script type="text/javascript">
function field( id ) {
  var ele = document.getElementById( id )
  if ( !ele ) {
    alert( 'Element not found. id="' + id + '"' )
  }
  return ele
}
function result( val ) {
  alert( 'result() "' + val + '"' )
  return ( val == '' ) ? 0.0 : parseFloat( val )
}
function func1() {
  var val1 = result( field( 'textField1' ).value )
  var val2 = result( field( 'textField2' ).value )
  var val3 = result( field( 'textField3' ).value )
  field( 'answerField1' ).value = val1 + val2 + val3
}
</script>
 
</body>
</html>

Open in new window

0
 

Author Comment

by:arendt73
ID: 24116716
Very close.  I do not need need the prompts after the values are totaled at the end.  I would like the total box to update automatically after an amount is entered.  Also, there is a chance that a textfield my not contain a value (defaulted to 0.00).    
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24116761
Understood.  The "alert()" was just added to help me understand what was happening.  How about:
<html>
<body>
 
<form name='myform' action=''>
  1: <input type="text" id="textField1"><br>
  2: <input type="text" id="textField2"><br>
  3: <input type="text" id="textField3" onChange="func1()"><br>
Total 
  <input type="text" id="answerField1">
</form>
 
 
<script type="text/javascript">
function field( id ) {
  var ele = document.getElementById( id )
  if ( !ele ) {
    alert( 'Element not found. id="' + id + '"' )
  }
  return ele
}
function result( val ) {
  return ( val == '' ) ? 0.0 : parseFloat( val )
}
function func1() {
  var val1 = result( field( 'textField1' ).value )
  var val2 = result( field( 'textField2' ).value )
  var val3 = result( field( 'textField3' ).value )
  field( 'answerField1' ).value = val1 + val2 + val3
}
</script>
 
</body>
</html>

Open in new window

0
Plesk WordPress Toolkit

Plesk's WordPress Toolkit allows server administrators, resellers and customers to manage their WordPress instances, enabling a variety of development workflows for WordPress admins of all skill levels, from beginners to pros.

See why 2/3 of Plesk servers use it.

 
LVL 41

Expert Comment

by:HonorGod
ID: 24116789
Note though, that the answer will only be updated when the textField3 input field is modified.  If you want changes to any of them to be reflected, you could use something like:
<html>
<body>
 
<form name='myform' action=''>
  1: <input type="text" id="textField1" onChange="func1()"><br>
  2: <input type="text" id="textField2" onChange="func1()"><br>
  3: <input type="text" id="textField3" onChange="func1()"><br>
Total 
  <input type="text" id="answerField1">
</form>
 
 
<script type="text/javascript">
function field( id ) {
  var ele = document.getElementById( id )
  if ( !ele ) {
    alert( 'Element not found. id="' + id + '"' )
  }
  return ele
}
function result( val ) {
  return ( val == '' ) ? 0.0 : parseFloat( val )
}
function func1() {
  var val1 = result( field( 'textField1' ).value )
  var val2 = result( field( 'textField2' ).value )
  var val3 = result( field( 'textField3' ).value )
  field( 'answerField1' ).value = val1 + val2 + val3
}
</script>

Open in new window

0
 

Author Comment

by:arendt73
ID: 24117186
Is there a way to make the total field (answerField) total with cents (.00)?  Right now, after the textfields have data, the final total adds/calculates without cents.  
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24117388
Certainly, the following indicates that the value should include 2 (and only 2) places after the decimal place.
field( 'answerField1' ).value = ( val1 + val2 + val3 ).toFixed( 2 )

Open in new window

0
 
LVL 41

Accepted Solution

by:
HonorGod earned 2000 total points
ID: 24118371
Anything else?
0
 
LVL 41

Expert Comment

by:HonorGod
ID: 24118697
Thank you for the grade & points.

Good luck & have a Happy Easter
0

Featured Post

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question