Creating Interactivity with Forms and JavaScript

"A Tutorial by Victoria Leonard"

The Misunderstood Textarea Object
Many people use the textarea object as though it were just a bigger version of the INPUT TYPE="text", but it has it own personality. Here is the basic format:

<textarea NAME="getThis" COLS="60" Rows="7">Default Text</textarea>

Again, the COLS and ROWS refer to the number of characters the field can accommodate using the fixed-font chosen in the browser preferences. Now for the things to watch out for.

Spacing in the textarea. How you align your code is not supposed to make any difference in HTML, but in a few cases it does and this is one of them. If you like aligning start and end tags vertically you expect to write this code as:
<textarea NAME="getThis" COLS="60" Rows="7">
Default Text
</textarea>

Sadly, you now find that your default text, or your insertion point if there is no default text, is out in the middle of your textarea. In fact, if you leave more space in your code than fits in the textarea field, the default text or insertion point does not appear at all. This problem occurs in both the Netscape Navigator and Internet Explorer browsers.
Differences between browsers. What happens if you TAB while in a textarea? In Netscape Navigator, the insertion moves a few spaces to the right in the textarea itself. In Internet Explorer, you end up in the next field. Also, those of you who use the WRAP attribute introduced in Netscape Navigator 2.0 should be aware that the values have changed. The "physical" value previously used to insert new-line characters into the user's input where it wraps in the textarea is now assigned as WRAP="hard". The "virtual" value which wrapped the text without changing it is now WRAP="soft". This is the default now, instead of WRAP="off", which no longer seems to work at all. The WRAP attribute does not do anything in Internet Explorer.

The following is a version of the code that I use to check my JavaScript as I write it. The code itself goes in the textarea and any variables whose values I want to check go in the text fields in the lower left.

evaljs.html Evaluating JavaScript in the Browser

<html> <head> <title>Evaluating JavaScript</title> <script language="JavaScript" type="text/javascript"> function display() { document.mainForm.elements[3].value = eval(document.mainForm.elements[0].value) for ( var n = 5 ; n < 8 ; n = n + 2 ) document.mainForm.elements[n].value = eval(document.mainForm.elements[n - 1].value) } </script> </head> <body onLoad="document.forms[0].elements[0].focus()"> <form name="mainForm">  Type Some JavaScript Code Here: <textarea NAME="getThis" COLS="60" Rows="7">Default Text</textarea>  <input type="button" value="EVALUATE" onclick="display()"> <input type="reset" value="CLEAR">  <input type="text" name="putHere" size="60" value=""> Variable: <input type="text" name="varA" size="31" value=""> Has Value: <input type="text" name="valA" size="31" value=""> Variable: <input type="text" name="varB" size="31" value=""> Has Value: <input type="text" name="valB" size="31" value=""> </form> </body> </html>

Run this code

In this code, function display() runs the eval() method on the contents of the form's first element, which is a textarea. If you type a function into the textarea, you will see what the function returns in the text field under the buttons. The buttons are the second and third elements, so the text field is the fourth. The script then executes a loop. Starting with the sixth element, it puts into every other field the value of the field before. For instance, let's say that you have a variable "runningTotal" in your code. You do a number of things to this variable in one or more functions which you type into the textarea. If you put the name "runningTotal" into one of the text fields in the lower left, the corresponding field on the lower right will tell you what the value of this variable is after all the code has been run.

I have tried to eliminate extraneous HTML formatting from the code samples, but you will see it if you view the source of the running code. None of this affects the function of the page. It just makes the function easier to follow in the browser, if not in the code.

In the next section, we look at some text validation techniques.

Pages in the Tutorial