Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

JavaWorld.com > Java Development Tools >

Using JavaScript and forms

Of all the hats JavaScript can wear, its form processing features are among the most sought and used

By Gordon Mccomb, JavaWorld.com, 06/01/96

  • Print
  • Feedback
.

Page 2 of 7

Listing 1. testform.html

<HTML>
<HEAD>
<TITLE>Test Input</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
    var TestVar = form.inputbox.value;
    alert ("You typed: " + TestVar);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">Enter something in the box: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</FORM>
</BODY>
</HTML>

Here's how the script works. JavaScript calls the testResults function when you click the button in the form. The testResults function is passed the form object using the syntax this.form (the this keyword references the button control; form is a property of the button control and represents the form object). I've given the form object the name form inside the testResult function, but you can any name you like.

The testResults function is simple -- it merely copies the contents of the text box to a variable named TestVar. Notice how the text box contents was referenced. I defined the form object I wanted to use (called form), the object within the form that I wanted (called inputbox), and the property of that object I wanted (the value property).

More from JavaWorld

Want more programming tutorials and news? Get the JavaWorld Enterprise Java newsletter delivered to your inbox.

Setting a value in a form object

The value property of the inputbox, shown in the above example, is both readable and writable. That is, you can read whatever is typed into the box, and you can write data back into it. The process of setting the value in a form object is just the reverse of reading it. Here's a short example to demonstrate setting a value in a form text box. The process is similar to the previous example, except this time there are two buttons. Click the "Read" button and the script reads what you typed into the text box. Click the "Write" button and the script writes a particularly lurid phrase into the text box.

Listing 2. set_formval.html

<HTML>
<HEAD>
<TITLE>Test Input </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function readText (form) {
    TestVar =form.inputbox.value;
    alert ("You typed: " + TestVar);
}

function writeText (form) {
    form.inputbox.value = "Have a nice day!"
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
Enter something in the box: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button1" Value="Read" onClick="readText(this.form)">
<INPUT TYPE="button" NAME="button2" Value="Write" onClick="writeText(this.form)">
</FORM>
</BODY>
</HTML>
  • When you click the "Read" button, JavaScript calls the readText function, which reads and displays the value you entered into the text box.
  • When you click the "Write" button, JavaScript calls the writeText function, which writes "Have a nice day!" in the text box.

Reading other form object values

The text box is perhaps the most common form object you'll read (or write) using JavaScript. However, you can use JavaScript to read and write values from most other objects (note that JavaScript cannot currently be used to read or write data using the password text box). In addition to text boxes, JavaScript can be used with:

  • Print
  • Feedback