Calculation fields in text box 2

lynxvoodoo · May 15, 2003

Hi! Could someone please advise as to how I can calculate values entered into text fields and then display them in text fields 3.

e.g textfield1 + textfield2 = textfield3

Any help is greatly appreciated.

Nan

onpnt · May 15, 2003

use
parseInt() and parseFloat() to convert to the correct datatype

reference

http://www.w3schools.com/wmlscript/lang_parsefloat.asp

http://www.w3schools.com/wmlscript/lang_parseint.asp

_________________________________________________________
_{$str = "sleep is good for you. sleep gives you the energy you need to function";

$Nstr = ereg_replace("sleep","coffee",$str); echo $Nstr;}

^{http://www.onpntwebdesigns.com
[/sub]}

dwarfthrower · May 15, 2003

You're about half an inch away from where you need to be.

Firstly, you'll need to make sure your text fields have unique names so that JavaScript knows which is which.
[tt]
<input type="text" name="textfield1">
<input type="text" name="textfield2">
<input type="text" name="textfield3">
[/tt]

Now JavaScript is primarily an event-driven language, meaning that things only usually happen as a result of some event occuring (the page loads, the user clicks a button, etc). So we need an event to tell JavaScript to perform the calculation. In this case we'll add a button to the page for the user to click:
[tt]
<input type="button" value="Calculate Total" onClick="doCalcTotal()">
[/tt]

So the 'onClick' event of the button triggers a Javascript function called 'doCalcTotal()'. Now all we need to do is to ensure that when the button gets clicked, the browser knows what 'doCalcTotal()' means. To do this we have to define the function. In the <head></head> section of our page we can put a script which will define the function.
[tt]
<script language="JavaScript>
function doCalcTotal() {
var input1 = parseInt(document.all.textfield1.value);
var input2 = parseInt(document.all.textfield2.value);

var myTotal = input1 + input2;

document.all.textfield3.value = total;
}
</script>
[/tt]

OK, to step through that line-by-line:
The first line <script language="JavaScript> tells the browser that we are switching from HTML to JavaScript for a while.

The second line function doCalcTotal() { is the function definition, this declaration tells the browser that what follows is a function that can be called to perform some action.

var input1 = parseInt(document.all.textfield1.value); first declares a variable called input1, then assigns a value to it. The value is the result of the parseInt() function. parseInt returns the integer value of whatever is passed to it, in this case - whatever is currently in the field 'textfield1'.

var input2 = parseInt(document.all.textfield2.value); does much the same, this time putting the numeric value of what is in 'textfield2' into the variable 'input2'.

var myTotal = input1 + input2; defines a third variable 'myTotal' and assigns it the value of the sum of input1 and input2.

document.all.textfield3.value = myTotal; changes the current value of textfield3 to the value of 'myTotal'. Note that we don't simply refer to the field as 'textfield3'. Prior to the field name we have 'document.all.' which is IE's way of referring to the collection of objects on the page. However, what we are after is not the text field itself, rather the value that it contains, hence we need to add the .value property to access the 'value' property member of the text field.

} - tell the browser that this function is finished.

</script> lets the browser know that we've finished with JavaScript for the time-being and it can go back to processing things as HTML.

Hope this is the sort of thing you're after.

EdwardMartinIII · May 16, 2003

And if you really want to go to town and, say, your numbers are larger than JavaScript can recognize as numbers, feel free to check the code driving

http://www.petting-zoo.org/Calculator.html

Cheers,

Edward

"Cut a hole in the door. Hang a flap. Criminy, why didn't I think of this earlier?!" -- inventor of the cat door

etu1972 · May 19, 2003

Hi Dwarfthrower,

I tried the following code and couldn't get a result in textbox 3. Can you see what I'm doing wrong? Thanks, AMc

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
function doCalcTotal() {
var input1 = parseInt(document.all.textfield1.value);
var input2 = parseInt(document.all.textfield2.value);
var myTotal = input1 + input2;
document.addition.textfield3.value = myTotal;
}
</script>

</head>

<body bgcolor="#FFFFFF" text="#000000">
<form name="addition">
<input type="text" name="textfield1">
<input type="text" name="textfield2">
<input type="text" name="textfield"3>
<input type="button" value="Calculate Total" onClick="doCalcTotal()">
</form>
</body>
</html>

Should I stay or should I go? Thanks & Goodbye, Joe.

HellTel · May 19, 2003

<input type="text" name="textfield"[red]3[/red]>

should be inside the quotes like:

<input type="text" name="textfield3">

Hope I helped / Thanks for helping
if ((Math.abs(x)<10&&Math.abs<10) && (((parseInt(Math.abs(x).toString()+Math.abs.toString())-Math.abs(x)-Math.abs)%9)!=0)) {alert("I'm a monkey's uncle"}

etu1972 · May 19, 2003

Duheeee! Do I feel stupid? YEP! Thanks, AMc

Should I stay or should I go? Thanks & Goodbye, Joe.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Calculation fields in text box 2

lynxvoodoo

Technical User

onpnt

Programmer

dwarfthrower

Programmer

EdwardMartinIII

Technical User

etu1972

Programmer

HellTel

Programmer

etu1972

Programmer

Similar threads

Part and Inventory Search

Sponsor