How to Calculate Order Form Totals in JavaScript

by Cathlene S. Baptista

JavaScript is a scripting language used to add dynamic functionality to web pages. JavaScript is placed directly into a web page’s HTML and is used to add interactivity, such as user feedback and input validation, to otherwise static pages. JavaScript also interacts directly with items on a web page, such as input fields and buttons, so it can be used to update their attributes. JavaScript can be used, for example, to keep track of values entered by a user, add them and provide the total.

Calculating Order Form Totals in JavaScript

1

Open a text editor and create a file with a .htm extension. This file will contain the markup (HTML) that defines the form and the form’s contents: two fields where the user enters numbers, a button to calculate a total based on the two numbers, and a total field that holds the total.

<html> <head></head> <body><form></form></body> </html>

2

Add three input fields to the form. Name the first input field “box1,” name the second input field “box2” and name the third input field “total.” Box1 will hold the first number, box2 the second number, and the total will be placed in the total field. Give the input fields a size of 3 and a maximum length of 3.

<html> <head></head> <body><form> <input type=text size=3 maxlength=3 name="box1"> <input type=text size=3 maxlength=3 name="box2"> <input type=text size=3 maxlength=3 name="total"> </form></body> </html>

3

Add an HTML button to the form. When clicked, the button passes the form and its elements (this.form) to a JavaScript function called runTotal(). Call the function using the onClick() event and give the button a name using the value= attribute.

<html> <head></head> <body><form> <input type=text size=3 maxlength=3 name="box1"> <input type=text size=3 maxlength=3 name="box2"> <input type=text size=3 maxlength=3 name="total"> <input type="button" onClick="runTotal(this.form)" value="Calculate Running Total"> </form></body> </html>

4

Add a JavaScript function (runTotal()) to the HTML <head> section between JavaScript <script> and </script> tags. This function receives the form elements, adds the values of box1 and box2 and places the result in the total input field. Use forward-slashes (//) to indicate comments. <html> <head> <script language="javascript" type="text/javascript"> function runTotal(myForm) { //code goes here } </script> </head><body> <form> <input type=text size=3 maxlength=3 name="box1"> <input type=text size=3 maxlength=3 name="box2"> <input type=text size=3 maxlength=3 name="total"> <input type="button" onClick="runTotal(this.form)" value="Calculate Running Total"> </form></body> </html>

5

Declare two variables and assign them the values of box1 and box2. JavaScript uses the plus (+) sign to concatenate strings, so use the Number() function to ensure that JavaScript performs addition when adding the values.

<html> <head> <script language="javascript" type="text/javascript"> function runTotal(myForm) { //code goes here //declare variables and assign box1 and box2. var form_field1 = Number(myForm.box1.value); var form_field2 = Number(myForm.box2.value); } </script> </head> <body><form> <input type=text size=3 maxlength=3 name="box1"> <input type=text size=3 maxlength=3 name="box2"> <input type=text size=3 maxlength=3 name="total"> <input type="button" onClick="runTotal(this.form)" value="Calculate Running Total"> </form></body> </html>

6

Add the two variable values and update the total field with the result.

<html> <head> <script language="javascript" type="text/javascript"> function runTotal(myForm) { //code goes here //declare variables and assign box1 and box2. var form_field1 = Number(myForm.box1.value); var form_field2 = Number(myForm.box2.value); //add the variables and update the total field value with the result. myForm.total.value = form_field1 + form_field2; } </script> </head> <body><form> <input type=text size=3 maxlength=3 name="box1"> <input type=text size=3 maxlength=3 name="box2"> <input type=text size=3 maxlength=3 name="total"> <input type="button" onClick="runTotal(this.form)" value="Calculate Running Total"> </form></body> </html>

7

Open the .htm page in a browser. Type a number in box1, a number in box2, and click the button to add the numbers. The total will appear in the total field.

Tips

  • check Use the “value=0” option with box1 and box2 to give them an initial value of 0 when the page loads.
  • check Add some text before the total field to separate it from the other fields on the page.
  • check This JavaScript adds two values for simplification. Use a loop and array values to make the code more flexible.
  • check Try using the onChange() event on box1 and box2 to calculate the total as users enter values.

Items you will need

About the Author

Cathlene S. Baptista began writing professionally in 2010, specializing in technical topics. She has also worked at McGraw-Hill as a writer and editor. Baptista holds a Bachelor of Arts in psychology from the University of Maryland and a Master of Science in information systems from George Washington University.

Photo Credits

  • photo_camera Thinkstock/Comstock/Getty Images