Using JavaScript & Forms to intereact with users | 2 | WebReference

Using JavaScript & Forms to intereact with users | 2


JavaScript and Forms

Creating applications using forms.

Forms and JavaScript can be good for creating simple user interaction or simple applications. Following is a simple calculator I created as an example. Put this is the <head> tag.

<script language="javascript"><!-- var CurOp="+"; // current operator var CurTot=0; // current total var CurNum=""; // current contents of textbox function CalcNum(NewNum) { CurNum += NewNum; document.calcform.displaytext.value=CurNum; if (CurOp=="") { //checks that equals has not just been pressed CurTot=0; //reset total CurOp="+"; } } function ChangeOp(NewOp) { // calculate total then change current operator if (CurOp != "") { CurTot=eval(CurTot + CurOp + parseFloat(CurNum)); //perform operation CurNum=""; // clear it document.calcform.displaytext.value=CurTot; //display it } CurOp=NewOp; //change operation } function ChngSign() { // multiply by -1 if (CurNum != "") { CurNum = (parseFloat(CurNum) * -1).toString(); } else { CurNum = "-"; } document.calcform.displaytext.value=CurNum; } function CalcTot() { // calculate total if (CurOp != "") { CurTot=eval(CurTot + CurOp + parseFloat(CurNum)); CurNum=""; CurOp=""; document.calcform.displaytext.value=CurTot; } } function CalcClear() { // clear everything CurOp=""; CurNum=""; CurTot=""; document.calcform.displaytext.value="0"; } //--> </script>I'm aware that parts of this are complex, but I wanted to show a working example of an application. You will then need to add some html to your page to interact with this script. View the source of this page to see what I've done to create it. Simply, I've created a form called "calcform," a textbox called "displaytext" and inputs with "onClick" events calling the above functions. Each button with a number calls the "CalcNum" function with the variable "NewNum" as a string of the number. Each operator calls the function "ChangeOp" with the variable "NewOp" as the new operator (+,-,*,/).

There is also an equals sign which calls "CalcTot," and a Clear button which calls "CalcClear".

I have set up three main variables - "CurTot" which is a floating point integer of the total, without the current number in the textbox. "CurNum" is a string representation of the current number being entered (I.E. what is in the textbox). Lastly "CurOp" gives a string of the operator that is going to be used in the next operation.
I'm aware that JavaScript is a very loosely typed language, but it helps to have a definite idea of the data type of each variable. You can see I have frequently changed the types of variables using the parseFloat and toString methods.

Many other applications can be developed, and although JavaScript is often overlooked in favor of Java and other solutions, it still can prove very useful in a web site. JavaScript does not have to load the Java Virtual Machine and therefore does not have the loading delay or slow speed often associated with Java.

Hopefully this proves useful, and I hope to see many more people using JavaScript to interact with users, and create small fast applications.

# # #

About the author: Mark Young is a Web Designer and Software Programmer for eDuck Web Design and hails from the land of kiwis. He can be reached at


Created: January 26, 2001
Revised: January 26, 2001