• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 623
  • Last Modified:

Calculating adding numbers in text fields using javascript

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
arendt73
Asked:
arendt73
  • 6
  • 2
1 Solution
 
HonorGodSoftware EngineerCommented:
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
 
arendt73Author Commented:
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
 
HonorGodSoftware EngineerCommented:
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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
HonorGodSoftware EngineerCommented:
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
 
arendt73Author Commented:
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
 
HonorGodSoftware EngineerCommented:
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
 
HonorGodSoftware EngineerCommented:
Anything else?
0
 
HonorGodSoftware EngineerCommented:
Thank you for the grade & points.

Good luck & have a Happy Easter
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

  • 6
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now