How to autosum text boxes

In my last post I tried to make little fancy style background of my html file. Now let me give you another simple script on how to create Auto Sum functionality in textbox using a JavaScript function.

What is a JavaScript function?
Courtesy of http://www.w3schools.com

Steps in creating JavaScript snippets

1. First, create a form in an HTML file and name that form.

<html>
<head>
<title>
</ title >
</head>
<body>
    <form name=”FormSample”>
        <input type=”text” name=”first” onfocus="startCalc();" >
        <input type=”text” name=”second” onfocus="startCalc();" >
        <input type=”text” name=”total”>
    </form>
</body>
<html>

2. After creating the structure of HTML. Now put a javascript function between the <head> and </head> tag.

<script language="javascript">
//calc is the function name
function calc(){

//declaring variables one and two 

one = document. FormSample.first.value;
two = document. FormSample.second.value;

//apply operations . The parseFloat will convert the number into float data type
document. FormSample.total.value =parseFloat  (one) +  parseFloat (two);

}
</script>

Search This Blog

Nov 25, 2010

How to autosum text boxes

0 comments: