Solved

Calculating adding numbers in text fields using javascript

Posted on 2009-04-10
8
609 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
  • 6
  • 2
8 Comments
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:arendt73
Comment Utility
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
Comment Utility
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 500 total points
Comment Utility
Anything else?
0
 
LVL 41

Expert Comment

by:HonorGod
Comment Utility
Thank you for the grade & points.

Good luck & have a Happy Easter
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
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…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now